面试题：Solid.js 中 createMemo 在数据流管理里如何避免不必要的计算

Question

在 Solid.js 项目中，假设存在一个复杂的数据流计算逻辑，依赖于多个状态变量。请阐述如何利用 createMemo 来确保只有当相关状态变量发生变化时，才执行该计算逻辑，避免不必要的性能损耗，并给出简单的代码示例。

Answer 1

1. 原理阐述：
   • createMemo 是 Solid.js 中用于创建 memoized 值的函数。它会记住上一次计算的结果，只有当它的依赖（即传入的函数中引用的响应式状态变量）发生变化时，才会重新计算。这样可以有效地避免在状态未改变时重复执行复杂的计算逻辑，从而提升性能。
2. 代码示例：

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

// 创建状态变量
const [count1, setCount1] = createSignal(0);
const [count2, setCount2] = createSignal(1);

// 使用 createMemo 包裹复杂计算逻辑
const complexCalculation = createMemo(() => {
    // 这里模拟复杂计算，依赖 count1 和 count2
    return count1() * count2() + Math.pow(count1(), 2);
});

// 在组件中使用
function App() {
    return (
        <div>
            <p>Count1: {count1()}</p>
            <p>Count2: {count2()}</p>
            <p>Complex Calculation Result: {complexCalculation()}</p>
            <button onClick={() => setCount1(count1() + 1)}>Increment Count1</button>
            <button onClick={() => setCount2(count2() + 1)}>Increment Count2</button>
        </div>
    );
}

export default App;

在上述代码中，complexCalculation 是通过 createMemo 创建的 memoized 值，它依赖 count1 和 count2。只有当 count1 或 count2 发生变化时，complexCalculation 才会重新计算，避免了不必要的性能损耗。