面试题：Solid.js 中 createMemo 的基础应用

Question

在 Solid.js 项目里，假设你有一个复杂的计算函数 `calculateComplexValue`，它依赖于两个状态变量 `state1` 和 `state2`。请使用 `createMemo` 来优化这个计算，确保只有当 `state1` 或 `state2` 变化时才重新计算，并解释为什么这样做能优化性能。

Answer 1

1. 代码实现：

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

const [state1, setState1] = createSignal(0);
const [state2, setState2] = createSignal(0);

const calculateComplexValue = (a, b) => {
  // 这里是复杂计算逻辑
  return a + b; 
};

const complexValue = createMemo(() => calculateComplexValue(state1(), state2()));

2. 性能优化解释：
   • createMemo 会缓存其返回值。当 state1 或 state2 没有变化时，createMemo 不会重新执行回调函数 () => calculateComplexValue(state1(), state2())。
   • 对于复杂计算函数 calculateComplexValue，如果每次渲染都重新计算，会消耗大量性能。通过 createMemo，只有在依赖的 state1 或 state2 变化时才重新计算，避免了不必要的计算，从而提升了性能。