面试题：Solid.js中如何使用Context API与createStore进行简单的状态提升

Question

请描述在Solid.js项目中，使用Context API和createStore将一个组件内的状态提升到父组件的基本步骤，并给出一个简单示例代码，该示例至少包含一个子组件，子组件通过状态提升获取并展示父组件管理的状态。

Answer 1

基本步骤

1. 创建共享状态：在父组件中使用 createStore 创建状态。
2. 创建 Context：使用 createContext 创建上下文对象。
3. 提供 Context：父组件通过 Context.Provider 向下传递状态。
4. 子组件消费 Context：子组件通过 Context.Consumer 或 useContext 来获取共享状态。

示例代码

import { createContext, createStore } from 'solid-js';

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

// 父组件
const Parent = () => {
  const [state, setState] = createStore({
    message: '初始消息'
  });

  return (
    <MyContext.Provider value={state}>
      <Child />
    </MyContext.Provider>
  );
};

// 子组件
const Child = () => {
  const state = MyContext.useContext();
  return <div>{state.message}</div>;
};

export default function App() {
  return (
    <div>
      <Parent />
    </div>
  );
}