面试题：Solid.js中createMemo与createSignal结合使用场景

Question

请描述在Solid.js中，createMemo与createSignal通常在哪些场景下结合使用，举例说明其代码实现逻辑，比如实现一个简单的计数器并根据计数结果派生一些其他状态。

Answer 1

1. 结合使用场景
   • createSignal用于创建响应式状态，它会跟踪状态的变化并在状态改变时触发相关副作用或重新渲染。createMemo用于创建派生状态，只有当它依赖的响应式状态变化时才会重新计算，常用于缓存一些计算结果，避免不必要的重复计算。
   • 例如在一个计数器场景中，计数器本身的数值用createSignal创建，而根据计数器数值派生出来的其他状态（如是否为偶数、某个特定条件下的文本等）可以用createMemo来创建。
2. 代码实现逻辑示例

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

const App = () => {
    // 创建计数器信号，初始值为0
    const [count, setCount] = createSignal(0);
    // 使用createMemo根据count派生一个状态，判断count是否为偶数
    const isEven = createMemo(() => count() % 2 === 0);

    return (
        <div>
            <p>Count: {count()}</p>
            <p>Is Even: {isEven()? 'Yes' : 'No'}</p>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
        </div>
    );
};

export default App;

在上述代码中，createSignal创建了计数器count和修改它的函数setCount。createMemo创建了派生状态isEven，只有当count变化时，isEven才会重新计算。每次点击按钮，count增加，isEven会根据新的count值重新计算，页面也会相应更新显示新的结果。