面试题：Solid.js 响应式系统中信号（Signal）的工作原理是什么

1. Signal 概念

在 Solid.js 响应式系统中，信号（Signal）是一种核心的数据结构，用于存储可响应的数据值。它就像是一个数据的容器，并且能够通知依赖于该数据的组件，当数据发生变化时进行更新。Signal 可以理解为一个“可观察的数据单元”，任何对 Signal 值的读取都会自动建立起依赖关系，使得依赖该 Signal 的部分能实时响应数据变化。

2. 工作原理

依赖收集：当组件读取 Signal 的值时，Solid.js 会在内部记录下这个组件对该 Signal 的依赖。这个过程是自动且隐式的，开发者无需手动管理依赖关系。
变化通知：当 Signal 的值通过 set 函数（用于更新 Signal 值）发生改变时，Solid.js 会遍历所有依赖于该 Signal 的组件，并标记这些组件需要重新渲染。然后 Solid.js 会在适当的时机（通常是在当前事件循环结束时）批量更新这些标记为需要更新的组件，从而实现高效的更新机制，避免不必要的重复渲染。

3. 实际代码示例

import { createSignal } from 'solid-js';

function Counter() {
  // 定义 Signal，返回一个数组，第一个元素是当前值，第二个是用于更新值的函数
  const [count, setCount] = createSignal(0);

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

在上述代码中：

通过 createSignal(0) 定义了一个初始值为 0 的 Signal，createSignal 返回一个数组，解构得到 count（用于读取当前值）和 setCount（用于更新值）。
在 p 标签中读取 count() 的值，这会建立组件对 count Signal 的依赖。
当点击按钮时，调用 setCount(count() + 1) 更新 Signal 的值，由于组件依赖于 count Signal，Solid.js 会检测到变化并自动更新包含 {count()} 的部分，即重新渲染 <p>Count: {count()}</p> 这部分内容。

星途面试题库

面试题：Solid.js 响应式系统中信号（Signal）的工作原理是什么

知识考点

面试题答案

1. Signal 概念

2. 工作原理

3. 实际代码示例