面试题：Solid.js 中 createSignal 如何实现基本的响应式数据绑定

Question

请简要描述 Solid.js 里 createSignal 函数是怎样建立响应式数据绑定机制的，在一个简单的计数器示例中，使用 createSignal 创建一个计数器，说明其响应式更新的原理。

Answer 1

1. createSignal 建立响应式数据绑定机制

在 Solid.js 中，createSignal 函数用于创建一个响应式信号。它返回一个包含两个元素的数组：第一个元素是获取当前值的函数，第二个元素是更新值的函数。

当组件依赖于这个信号的值时，Solid.js 会自动追踪这个依赖。一旦信号的值通过更新函数改变，Solid.js 会自动重新渲染依赖该信号的组件部分，从而实现响应式数据绑定。

2. 简单计数器示例及响应式更新原理

import { createSignal } from 'solid-js';

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

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

• 响应式更新原理：
  • 当组件首次渲染时，count() 被调用获取初始值 0，Solid.js 追踪到 Counter 组件依赖于 count 信号。
  • 当点击按钮调用 setCount(count() + 1) 时，count 信号的值发生变化。由于 Counter 组件依赖于 count 信号，Solid.js 检测到这个变化，会重新渲染 Counter 组件中依赖 count 的部分（即 <p>Count: {count()}</p>），从而实现了响应式更新。