面试题：Solid.js createMemo 在复杂组件交互中的应用

Question

在一个包含多个嵌套组件的 Solid.js 应用中，父组件有一个状态数据，子组件需要根据这个状态经过复杂计算得出一个派生数据。要求使用 createMemo 来实现这个功能，并且要处理好依赖关系，避免不必要的重新计算。请描述实现思路并给出大致代码结构。

Answer 1

实现思路

1. 在父组件中定义状态数据。
2. 将状态数据传递给子组件。
3. 在子组件中使用 createMemo 创建派生数据，createMemo 的回调函数依赖状态数据，Solid.js 会自动追踪依赖关系，只有当依赖的状态数据发生变化时，createMemo 中的复杂计算才会重新执行，从而避免不必要的重新计算。

大致代码结构

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

// 父组件
const ParentComponent = () => {
  const [parentState, setParentState] = createSignal(0);

  return (
    <div>
      <ChildComponent state={parentState()} />
      <button onClick={() => setParentState(parentState() + 1)}>更新父组件状态</button>
    </div>
  );
};

// 子组件
const ChildComponent = ({ state }) => {
  const derivedData = createMemo(() => {
    // 这里进行复杂计算
    return state * 2 + 10;
  });

  return (
    <div>
      <p>派生数据: {derivedData()}</p>
    </div>
  );
};

export default ParentComponent;