面试题：Solid.js中createContext与useContext的基础应用

Question

在Solid.js项目中，假设我们有一个多层嵌套的组件结构，顶层组件需要向深层子组件传递一些状态数据。请描述如何使用createContext与useContext来实现状态共享，并且给出一个简单的代码示例，包括创建上下文、提供上下文以及消费上下文的过程。

Answer 1

1. 创建上下文： 使用createContext函数创建一个上下文对象。这个上下文对象包含Provider和Context两个属性。Provider用于向后代组件提供数据，Context用于后代组件消费数据。

   import { createContext } from'solid-js';
   
   // 创建上下文
   const MyContext = createContext();
   

2. 提供上下文： 在顶层组件中，使用MyContext.Provider包裹需要共享状态的子组件树，并通过value属性传递状态数据。

   import { createSignal } from'solid-js';
   import { MyContext } from './MyContext';
   
   const ParentComponent = () => {
     const [sharedState, setSharedState] = createSignal('初始状态');
   
     return (
       <MyContext.Provider value={[sharedState, setSharedState]}>
         {/* 子组件树 */}
       </MyContext.Provider>
     );
   };
   

3. 消费上下文： 在深层子组件中，使用useContext函数来获取顶层组件传递的状态数据。

   import { useContext } from'solid-js';
   import { MyContext } from './MyContext';
   
   const DeepChildComponent = () => {
     const [sharedState, setSharedState] = useContext(MyContext);
   
     return (
       <div>
         <p>共享状态: {sharedState()}</p>
         <button onClick={() => setSharedState('新状态')}>更新状态</button>
       </div>
     );
   };
   

完整示例：

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

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

const ParentComponent = () => {
  const [sharedState, setSharedState] = createSignal('初始状态');

  return (
    <MyContext.Provider value={[sharedState, setSharedState]}>
      <DeepChildComponent />
    </MyContext.Provider>
  );
};

const DeepChildComponent = () => {
  const [sharedState, setSharedState] = useContext(MyContext);

  return (
    <div>
      <p>共享状态: {sharedState()}</p>
      <button onClick={() => setSharedState('新状态')}>更新状态</button>
    </div>
  );
};

export default ParentComponent;