面试题：Solid.js 组件生命周期嵌套场景下的状态管理与性能优化

思路

减少不必要的渲染：使用 createMemo 对传递给子组件的数据进行 memo 化处理，确保只有当数据真正变化时才触发子组件重新渲染。同时在子组件中，对于内部状态，只在必要时更新。
合理使用生命周期：在 Solid.js 中，虽然没有传统类组件那样的生命周期钩子，但可以通过 createEffect 和 onCleanup 来模拟类似的功能。createEffect 可以在组件挂载和依赖变化时执行副作用操作，onCleanup 用于在组件卸载时清理副作用。
状态管理：对于子组件内部状态，尽量保持简单和局部化。如果有跨组件共享状态的需求，可以考虑使用 Solid.js 的上下文（context）或者第三方状态管理库（如 MobX 等，但 Solid.js 本身的能力通常已足够）。

关键代码片段

假设父组件 Parent 传递数据 data 给子组件 Child：

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

// 父组件
const Parent = () => {
  const [count, setCount] = createSignal(0);
  const data = createMemo(() => ({ value: count() }));

  setInterval(() => {
    setCount(count() + 1);
  }, 1000);

  return (
    <div>
      <Child data={data()} />
    </div>
  );
};

// 子组件
const Child = ({ data }) => {
  const [localState, setLocalState] = createSignal('initial value');

  createEffect(() => {
    // 模拟组件挂载或 data 变化时的副作用
    console.log('Data changed or component mounted:', data.value);
    onCleanup(() => {
      // 模拟组件卸载时的清理操作
      console.log('Component unmounted');
    });
  });

  // 子组件内部状态更新逻辑
  const handleClick = () => {
    setLocalState('new value');
  };

  return (
    <div>
      <p>Data from parent: {data.value}</p>
      <p>Local state: {localState()}</p>
      <button onClick={handleClick}>Update Local State</button>
    </div>
  );
};

在上述代码中，父组件通过 createMemo 对传递给子组件的数据进行了 memo 化。子组件通过 createEffect 和 onCleanup 模拟了生命周期操作，同时有自己的内部状态和更新逻辑。

星途面试题库

面试题：Solid.js 组件生命周期嵌套场景下的状态管理与性能优化

知识考点

面试题答案

思路

关键代码片段