避免不必要的重新渲染
- 使用
$: 声明响应式变量
- 原理：Svelte中，
$: 标记的变量会自动响应其依赖的变化。合理使用可以精确控制哪些变量变化会触发重新渲染。
- 示例：
<script>
let count = 0;
let otherValue = 'initial';
$: result = count * 2;
const increment = () => {
count++;
};
</script>
<button on:click={increment}>Increment</button>
<p>{result}</p>
<p>{otherValue}</p>
- 解释：在上述代码中，
count 变化时，只有依赖 count 的 result 会触发重新渲染，otherValue 不会因为 count 的变化而重新渲染。
- 利用
bind:this 与原生DOM事件
- 原理：直接操作原生DOM事件，而不是通过Svelte组件的响应式系统来处理一些简单事件，从而减少不必要的重新渲染。
- 示例：
<script>
let myButton;
const handleClick = () => {
console.log('Button clicked directly');
};
const setupClick = () => {
myButton.addEventListener('click', handleClick);
};
$: onMount(() => {
setupClick();
});
$: onDestroy(() => {
myButton.removeEventListener('click', handleClick);
});
</script>
<button bind:this={myButton}>Click me</button>
- 解释：这里直接在原生DOM按钮上添加点击事件，绕过了Svelte组件的部分响应式机制，对于一些不需要Svelte响应式更新的操作，这种方式能提升性能。
合理使用事件委托
- 在父元素上委托事件
- 原理：将子元素的事件委托到父元素上处理，减少事件处理器的数量。
- 示例：
<script>
const handleItemClick = (event) => {
console.log(`Clicked item with data: ${event.target.dataset.value}`);
};
</script>
<div on:click={handleItemClick}>
<div data - value="1">Item 1</div>
<div data - value="2">Item 2</div>
<div data - value="3">Item 3</div>
</div>
- 解释：所有子
div 的点击事件都委托到了外层 div 上处理，这样无论有多少子元素，都只需要一个事件处理器，减少了内存开销。
- 利用Svelte的
use:action 实现事件委托
- 原理：
use:action 允许在组件上附加自定义行为，可用于实现更复杂的事件委托场景。
- 示例：
<script>
const clickDelegate = (node, { targetSelector, handler }) => {
const handleClick = (event) => {
if (event.target.closest(targetSelector)) {
handler(event);
}
};
document.addEventListener('click', handleClick);
return {
destroy() {
document.removeEventListener('click', handleClick);
}
};
};
const handleListItemClick = (event) => {
console.log(`Clicked list item: ${event.target.textContent}`);
};
</script>
<ul use:clickDelegate={{ targetSelector: 'li', handler: handleListItemClick }}>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- 解释：通过
use:action 定义了一个点击委托行为，将 li 元素的点击事件委托到 document 上处理，这种方式可以在更灵活的场景下实现事件委托。
