面试题：Solid.js 中 createMemo 的动态依赖管理基础

Question

在 Solid.js 项目里，已知有一个组件依赖多个状态，其中部分状态是动态变化的。请阐述如何使用 createMemo 来管理这些动态依赖，确保在依赖状态变化时，createMemo 能正确重新计算。并给出一个简单示例代码说明。

Answer 1

1. 使用createMemo管理动态依赖的原理：
   • createMemo在Solid.js中用于创建一个记忆值，它会自动追踪其依赖的响应式状态。当任何依赖状态发生变化时，createMemo会重新计算其返回值。为了确保在依赖状态变化时createMemo能正确重新计算，只需将所有动态变化的状态作为依赖放在createMemo的回调函数中。Solid.js的响应式系统会自动检测这些依赖的变化并触发重新计算。
2. 示例代码：

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

const App = () => {
    // 创建两个信号（状态）
    const [count, setCount] = createSignal(0);
    const [text, setText] = createSignal('initial text');

    // 使用createMemo创建一个记忆值，依赖count和text
    const combinedValue = createMemo(() => {
        return `Count: ${count()}, Text: ${text()}`;
    });

    return (
        <div>
            <p>{combinedValue()}</p>
            <button onClick={() => setCount(count() + 1)}>Increment Count</button>
            <button onClick={() => setText('new text')}>Change Text</button>
        </div>
    );
};

export default App;

在上述代码中，createMemo的回调函数依赖于count和text这两个信号。每当count通过setCount更新或text通过setText更新时，combinedValue都会重新计算，页面上显示的文本也会相应更新。