面试题：Solid.js中createMemo依赖追踪机制的基本原理

Question

请简述Solid.js中createMemo的依赖追踪机制是如何工作的，在一个简单的函数组件中使用createMemo，当依赖发生变化时，createMemo是如何检测到并重新计算的？

Answer 1

1. Solid.js 中 createMemo 的依赖追踪机制概述

• 基本原理：createMemo 使用响应式追踪机制来跟踪其依赖。当一个 createMemo 函数被调用时，Solid.js 会在内部建立一个依赖关系图。在计算 createMemo 的值时，Solid.js 会记录下在计算过程中读取的所有响应式数据（如信号 Signal），这些响应式数据就是 createMemo 的依赖。

2. 在简单函数组件中使用 createMemo 及依赖变化检测

• 示例代码：

import { createSignal, createMemo } from 'solid-js';

const App = () => {
  const [count, setCount] = createSignal(0);
  const memoizedValue = createMemo(() => {
    return count() * 2;
  });

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

• 依赖检测与重新计算：
  • 在上述代码中，createMemo 内部函数依赖于 count 信号。当 count 信号发生变化（通过 setCount 函数触发）时，Solid.js 的响应式系统会检测到该变化。
  • 因为 count 是 createMemo 计算过程中读取的响应式数据，属于其依赖。一旦检测到依赖变化，createMemo 就会重新计算其返回值，并通知依赖于 memoizedValue 的部分（如组件的渲染）进行更新。这样，只有当依赖发生变化时，createMemo 才会重新计算，从而提高了应用的性能。