面试题：Solid.js中如何实现组件间的状态共享

Question

在Solid.js的项目中，经常会遇到多个组件需要共享某些状态的情况。请描述一种在Solid.js里实现组件间状态共享的常用方法，并给出简单的代码示例，说明该方法的工作原理。

Answer 1

常用方法：Context API

在Solid.js 中，可以使用 createContext 和 Context.Provider 来实现组件间状态共享。createContext 创建一个上下文对象，该对象包含 Provider 和 Consumer 组件。Provider 用于包裹需要共享状态的组件树，并传递共享状态。子组件可以通过 Consumer 或者 useContext 钩子来获取共享状态。

代码示例

import { createContext, createSignal, useContext } from 'solid-js';

// 创建上下文
const MyContext = createContext();

// 父组件，设置共享状态
const ParentComponent = () => {
  const [count, setCount] = createSignal(0);

  return (
    <MyContext.Provider value={[count, setCount]}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件，获取共享状态
const ChildComponent = () => {
  const [count, setCount] = useContext(MyContext);

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
};

工作原理

1. 创建上下文：createContext 函数创建一个上下文对象，这个对象包含 Provider 和 Consumer 组件（在 Solid.js 中，useContext 钩子代替了 Consumer 的部分功能）。
2. 提供共享状态：在父组件中，使用 Context.Provider 包裹需要共享状态的子组件树，并通过 value 属性传递共享状态。这里的共享状态可以是信号（signal），包含当前值和更新函数，例如 [count, setCount]。
3. 消费共享状态：子组件可以通过 useContext 钩子获取共享状态。useContext 接受上下文对象作为参数，并返回 Provider 传递的 value。这样，子组件就可以访问和修改共享状态，实现组件间状态共享。