面试题：Solid.js中createEffect处理副作用时的依赖收集机制

Question

在Solid.js中使用createEffect处理复杂副作用时，它是如何进行依赖收集的？请举例说明依赖变化时createEffect的响应逻辑。

Answer 1

1. Solid.js 中 createEffect 的依赖收集原理

在 Solid.js 中，createEffect 通过跟踪其回调函数中读取的响应式数据来进行依赖收集。Solid.js 使用一种细粒度的响应式系统，当响应式数据发生变化时，与之相关的副作用（如 createEffect 回调）会自动重新执行。

2. 举例说明依赖变化时 createEffect 的响应逻辑

import { createSignal, createEffect } from "solid-js";

const App = () => {
  const [count, setCount] = createSignal(0);
  const [text, setText] = createSignal('');

  createEffect(() => {
    console.log(`Count is ${count()}, Text is ${text()}`);
  });

  return (
    <div>
      <input type="number" onChange={(e) => setCount(+e.target.value)} />
      <input type="text" onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

export default App;

在上述代码中：

• createEffect 的回调函数读取了 count 和 text 这两个响应式信号。
• 当用户在第一个输入框中输入数字，count 信号变化，createEffect 回调会重新执行，控制台打印更新后的 count 值。
• 当用户在第二个输入框中输入文本，text 信号变化，createEffect 回调同样会重新执行，控制台打印更新后的 text 值。
• 若 count 和 text 都变化，createEffect 回调也会重新执行，打印两者最新的值。这体现了 createEffect 对依赖变化的响应逻辑。