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

Question

请简要描述 Solid.js 里 createMemo 的依赖追踪机制是如何工作的？在一个简单的计数器组件中，如果使用 createMemo 来缓存某个依赖于计数器值的计算结果，当计数器值变化时，createMemo 如何确定是否重新计算？

Answer 1

1. 依赖追踪机制工作原理
   • createMemo在Solid.js中使用响应式追踪机制。它会自动收集在其回调函数中读取的响应式值作为依赖。当这些依赖中的任何一个发生变化时，createMemo会被标记为无效，等待重新计算。
   • Solid.js内部通过一种叫做细粒度依赖追踪的方式实现这一点。每当访问一个响应式值（比如createSignal创建的信号值）时，createMemo的计算函数上下文会被记录为该响应式值的依赖。
2. 计数器组件中createMemo重新计算判断
   • 在简单计数器组件中，假设计数器是通过createSignal创建的信号（例如const [count, setCount] = createSignal(0)）。如果使用createMemo缓存依赖于计数器值的计算结果（例如const memoizedValue = createMemo(() => count() * 2)）。
   • 当调用setCount改变计数器的值时，由于count是createMemo回调函数中读取的响应式值，也就是依赖。count值的变化会触发依赖更新。
   • Solid.js检测到count的依赖列表中有createMemo的计算函数，就会标记该createMemo为无效，然后在下一次访问memoizedValue时，重新执行createMemo的回调函数() => count() * 2来重新计算结果。