面试题：Solid.js 组合模式下的状态管理与组件通信

Question

在Solid.js的组合模式中，多个组件需要共享和更新状态。例如，有一个父组件包含多个子组件，子组件需要根据共享状态进行渲染变化，并且子组件之间也需要通信来更新这个共享状态。请阐述实现这种场景的思路，并给出关键代码片段。

Answer 1

实现思路

1. 状态管理：使用 createSignal 来创建共享状态。createSignal 会返回一个数组，包含当前状态值和一个更新状态的函数。
2. 状态传递：通过父组件将共享状态和更新函数作为属性传递给子组件。
3. 子组件通信：子组件通过接收的更新函数来更新共享状态，从而触发其他依赖该状态的子组件重新渲染。

关键代码片段

1. 父组件代码

import { createSignal } from 'solid-js';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [sharedState, setSharedState] = createSignal(0);

  return (
    <div>
      <ChildComponent sharedState={sharedState} setSharedState={setSharedState} />
      <ChildComponent sharedState={sharedState} setSharedState={setSharedState} />
    </div>
  );
};

export default ParentComponent;

2. 子组件代码

import { createEffect } from'solid-js';

const ChildComponent = ({ sharedState, setSharedState }) => {
  createEffect(() => {
    console.log('Shared state changed:', sharedState());
  });

  const handleClick = () => {
    setSharedState(prev => prev + 1);
  };

  return (
    <button onClick={handleClick}>
      Update Shared State
    </button>
  );
};

export default ChildComponent;