面试题：Solid.js 组件的响应式原理及依赖跟踪机制

Solid.js 组件实现响应式数据绑定

在 Solid.js 中，通过 createSignal 来创建响应式状态。createSignal 返回一个数组，第一个元素是获取状态值的函数，第二个元素是更新状态值的函数。

例如：

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 是获取当前计数值的函数，setCount 是更新计数值的函数。当点击按钮调用 setCount 时，count() 的返回值改变，相关 DOM 部分（p 标签内的文本）就会自动更新。

依赖跟踪机制

Solid.js 使用细粒度的依赖跟踪机制。当一个组件渲染时，Solid.js 会记录该组件读取了哪些响应式数据（信号）。这些被读取的信号就是该组件的依赖。

例如，上述 Counter 组件依赖了 count 信号。当 count 信号通过 setCount 更新时，Solid.js 知道 Counter 组件依赖了这个信号，所以会重新渲染 Counter 组件。

在 Solid.js 内部，依赖跟踪基于一个全局的“渲染上下文”。当进入一个组件的渲染函数时，Solid.js 会激活一个新的渲染上下文。在这个上下文中读取的任何信号都会被记录为该组件的依赖。

假设我们有一个更复杂的场景：

import { createSignal } from 'solid-js';

function UserProfile() {
  const [user, setUser] = createSignal({ name: 'John', age: 30 });

  return (
    <div>
      <p>Name: {user().name}</p>
      <p>Age: {user().age}</p>
      <button onClick={() => setUser({ name: 'Jane', age: user().age + 1 })}>Update User</button>
    </div>
  );
}

这里 UserProfile 组件依赖了 user 信号。当点击按钮更新 user 信号时，Solid.js 会重新渲染 UserProfile 组件，因为它知道 UserProfile 依赖了 user。并且由于 Solid.js 的细粒度更新机制，只有依赖了改变部分（如 age 变化时，Age 相关的 p 标签）的 DOM 部分会被更新，而不是整个组件的 DOM 都重新渲染。

星途面试题库

面试题：Solid.js 组件的响应式原理及依赖跟踪机制

知识考点

面试题答案

Solid.js 组件实现响应式数据绑定

依赖跟踪机制