面试题：Solid.js 中 createMemo 的缓存机制基础

Question

在 Solid.js 里，createMemo 用于创建一个记忆化值。请阐述 createMemo 缓存机制的基本原理，以及它在组件性能优化方面所起的作用。并且举例说明在何种场景下使用 createMemo 能够显著提升性能。

Answer 1

createMemo 缓存机制基本原理

1. 依赖追踪：createMemo 会追踪其内部函数中所依赖的响应式数据。当依赖的响应式数据发生变化时，才会重新计算 memo 的值。
2. 缓存结果：在依赖未发生变化时，createMemo 会直接返回之前缓存的计算结果，避免重复计算。

在组件性能优化方面的作用

1. 减少不必要计算：对于一些计算成本较高的操作，只要依赖不变，就无需重复计算，节省了计算资源，提升组件渲染性能。
2. 控制更新粒度：使得组件内部分计算逻辑的更新与其他部分解耦，只在必要时更新，防止因不必要的重新渲染导致性能损耗。

显著提升性能的场景举例

假设一个电商应用展示商品列表，每个商品有复杂的价格计算逻辑（如包含多种折扣、税费计算等）。在商品列表组件中，每个商品价格的计算可以使用 createMemo。只要商品的基础数据（如原价、折扣率等）未发生变化，价格计算结果就会从缓存中获取，避免了每次组件渲染时重复计算价格，在大量商品展示时能显著提升性能。

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

const App = () => {
  const [productPrice, setProductPrice] = createSignal(100);
  const [discount, setDiscount] = createSignal(0.1);

  const finalPrice = createMemo(() => {
    // 复杂的价格计算逻辑
    return productPrice() * (1 - discount());
  });

  return (
    <div>
      <input type="number" onChange={(e) => setProductPrice(+e.target.value)} />
      <input type="number" onChange={(e) => setDiscount(+e.target.value)} />
      <p>Final Price: {finalPrice()}</p>
    </div>
  );
};

export default App;

在上述代码中，每次输入框的值变化时，只有对应的响应式数据（productPrice 或 discount）会触发重新计算，finalPrice 只有在依赖变化时才会重新计算，提升了性能。