面试题：Solid.js中createContext和useContext的基础使用

Question

请简要描述在Solid.js中如何使用createContext和useContext来实现组件间的状态共享。假设你有一个父组件App，和两个子组件Child1和Child2，需要在Child1中更新一个状态，并在Child2中获取该更新后的状态，用代码示例说明。

Answer 1

1. 首先，在Solid.js中创建上下文并共享状态的步骤如下：
   • 使用createContext创建一个上下文对象。
   • 在父组件中通过createSignal创建状态，并将状态和更新函数通过上下文传递下去。
   • 子组件使用useContext来获取上下文的值。

以下是代码示例：

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

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

const Child1 = () => {
    const context = useContext(MyContext);
    const [, setValue] = context;
    return (
        <button onClick={() => setValue(v => v + 1)}>
            更新状态
        </button>
    );
};

const Child2 = () => {
    const context = useContext(MyContext);
    const [value] = context;
    return (
        <div>
            当前状态值: {value()}
        </div>
    );
};

const App = () => {
    const [count, setCount] = createSignal(0);
    return (
        <MyContext.Provider value={[count, setCount]}>
            <Child1 />
            <Child2 />
        </MyContext.Provider>
    );
};

export default App;

在上述代码中：

• 首先通过createContext创建了MyContext。
• App组件中使用createSignal创建了count状态和setCount更新函数，并通过MyContext.Provider将它们作为数组[count, setCount]传递下去。
• Child1组件通过useContext获取上下文，解构出setCount并在按钮点击时更新状态。
• Child2组件同样通过useContext获取上下文，解构出count并显示当前状态值。