面试题：Solid.js中createMemo的基本使用及原理

Question

请简述Solid.js中createMemo的作用，在代码示例中，如何正确使用createMemo来管理派生状态，并解释它在什么情况下会重新计算。假设我们有一个组件，展示一个数字的平方值，且这个数字会在父组件中变化，使用createMemo实现该功能。

Answer 1

createMemo的作用

createMemo 用于创建一个派生状态。它接收一个函数，这个函数返回一个值，createMemo 会缓存这个返回值，只有当它依赖的响应式数据发生变化时，才会重新计算这个函数并更新缓存的值。这有助于避免不必要的计算，提升性能。

正确使用createMemo管理派生状态

在Solid.js中，可以这样使用 createMemo 来管理派生状态：

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

const MyComponent = () => {
  const [number, setNumber] = createSignal(1);

  const squaredNumber = createMemo(() => number() * number());

  return (
    <div>
      <p>原始数字: {number()}</p>
      <p>平方值: {squaredNumber()}</p>
      <button onClick={() => setNumber(number() + 1)}>增加数字</button>
    </div>
  );
};

export default MyComponent;

在上述代码中，createMemo 包裹了一个返回 number 平方值的函数。createMemo 会记住这个计算结果，只有当 number 这个响应式数据发生变化时，才会重新计算平方值。

重新计算的情况

createMemo 会在其依赖的响应式数据（例如 createSignal 创建的信号值）发生变化时重新计算。在上述示例中，当调用 setNumber 改变 number 的值时，createMemo 包裹的函数会重新执行，重新计算 squaredNumber 的值。