面试题：Solid.js createSignal 在复杂组件结构中的应用

Question

假设我们有一个多层嵌套的组件结构，父组件通过 createSignal 管理一个状态，需要将这个状态传递给深层子组件并在子组件中更新，更新后父组件及其他相关组件要能做出响应。请描述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 在父组件中使用 createSignal 创建状态和更新函数。
2. 通过属性将状态和更新函数层层传递给深层子组件。
3. 深层子组件调用传递进来的更新函数来更新状态，由于 createSignal 创建的状态是响应式的，父组件及其他相关依赖该状态的组件会自动做出响应。

关键代码示例（以 SolidJS 为例，因为 createSignal 是 SolidJS 中的 API）

import { createSignal } from 'solid-js';

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

  return (
    <div>
      <p>父组件中的 count: {count()}</p>
      <DeepChildComponent count={count} setCount={setCount} />
    </div>
  );
};

// 深层子组件
const DeepChildComponent = ({ count, setCount }) => {
  return (
    <button onClick={() => setCount(count() + 1)}>
      子组件更新 count
    </button>
  );
};

export default ParentComponent;