面试题：Solid.js 中事件处理与批量更新机制的基础理解

Question

在 Solid.js 中，简述事件处理函数是如何触发的，以及批量更新机制是怎样优化性能的，请结合简单代码示例说明。

Answer 1

事件处理函数触发

在 Solid.js 中，事件处理函数的触发与传统 HTML 事件绑定类似。通过在元素标签上直接定义事件处理函数，当相应事件发生时，该函数会被调用。例如：

import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);

  const handleClick = () => {
    setCount(count() + 1);
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在上述代码中，当按钮被点击时，handleClick 函数被触发，count 的值会加 1 并更新视图。

批量更新机制优化性能

Solid.js 采用自动批量更新机制。在事件处理函数中多次调用状态更新函数，Solid.js 会将这些更新合并成一次 DOM 更新，从而减少不必要的重渲染，提升性能。例如：

import { createSignal } from 'solid-js';

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

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

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

在 handleClick 函数中，虽然分别调用了 setCount1 和 setCount2 来更新两个不同的状态，但 Solid.js 会将这两个更新批量处理，仅进行一次 DOM 更新，而不是两次，有效地优化了性能。