面试题：Solid.js 中 Memoization 的基本应用

Question

在 Solid.js 项目中，有一个频繁调用且计算量较大的函数 `computeComplexValue`，它接受两个数字参数并返回复杂计算结果。请描述如何使用 Memoization 来优化这个函数的性能，给出关键代码示例并解释其原理。

Answer 1

原理

Memoization 是一种缓存函数计算结果的技术。对于相同的输入，直接返回缓存的结果，而不需要再次执行函数中的复杂计算，从而提高性能。在 Solid.js 中，可以使用 createMemo 来实现这一优化。

关键代码示例

import { createMemo } from 'solid-js';

// 模拟计算量大的函数
const computeComplexValue = (a, b) => {
  // 这里进行复杂计算
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += a * b + i;
  }
  return result;
};

const MyComponent = () => {
  let [num1, setNum1] = createSignal(1);
  let [num2, setNum2] = createSignal(2);

  const memoizedValue = createMemo(() => computeComplexValue(num1(), num2()));

  return (
    <div>
      <input type="number" value={num1()} onChange={(e) => setNum1(+e.target.value)} />
      <input type="number" value={num2()} onChange={(e) => setNum2(+e.target.value)} />
      <p>Memoized Result: {memoizedValue()}</p>
    </div>
  );
};

在上述代码中，createMemo 接受一个函数作为参数。这个函数会在依赖（num1 和 num2）发生变化时执行，并缓存结果。当依赖没有变化时，直接返回缓存的结果，避免了 computeComplexValue 的重复计算，从而提升了性能。