面试题：Solid.js中使用createContext实现组件间通信的基本步骤

Question

请简述在Solid.js中，使用createContext实现组件间通信的基本步骤，并且给出一个简单示例代码，展示如何创建上下文、提供上下文以及消费上下文。

Answer 1

基本步骤

1. 创建上下文：使用createContext函数创建一个上下文对象，这个对象包含Provider和Context属性。
2. 提供上下文：在需要共享数据的父组件中，使用Provider将数据传递下去。
3. 消费上下文：在子组件中，使用Context来获取父组件传递下来的数据。

示例代码

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

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

// 父组件，提供上下文
const ParentComponent = () => {
  const [count, setCount] = createSignal(0);
  return (
    <MyContext.Provider value={count}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件，消费上下文
const ChildComponent = () => {
  const count = useContext(MyContext);
  return <div>Count: {count()}</div>;
};

export default ParentComponent;