面试题：Solid.js事件处理函数与响应式系统结合的性能优化

Question

在Solid.js中，响应式系统会影响事件处理函数的性能。当一个事件处理函数需要更新多个响应式状态时，怎样做才能避免不必要的重新渲染以提升性能？请给出具体的代码示例及解释。

Answer 1

1. 使用 batch 函数：
   • 在Solid.js中，batch 函数可以将多个状态更新批量处理，从而避免多次不必要的重新渲染。当多个响应式状态的更新在 batch 函数内部时，Solid.js会将这些更新合并成一次渲染。
   • 代码示例：

import { createSignal, batch } from'solid-js';

const App = () => {
    const [count1, setCount1] = createSignal(0);
    const [count2, setCount2] = createSignal(0);

    const handleClick = () => {
        batch(() => {
            setCount1(count1() + 1);
            setCount2(count2() + 1);
        });
    };

    return (
        <div>
            <p>Count1: {count1()}</p>
            <p>Count2: {count2()}</p>
            <button onClick={handleClick}>Increment both</button>
        </div>
    );
};

export default App;

• 解释：
  • 这里定义了两个响应式状态 count1 和 count2 及其对应的更新函数 setCount1 和 setCount2。
  • 在 handleClick 事件处理函数中，使用 batch 函数包裹了对 count1 和 count2 的更新操作。如果不使用 batch，每次调用 setCount1 和 setCount2 都会触发一次重新渲染。而使用 batch 后，Solid.js会将这两个状态更新合并，只触发一次重新渲染，从而提升性能。