面试题：Solid.js中如何基于Context API实现简单的状态管理

Question

在Solid.js项目中，假设你有一个组件树，顶层组件需要向深层子组件传递一些状态数据，例如用户登录信息。请使用Context API来实现这个状态传递，要求写出关键代码片段，并解释每个部分的作用。

Answer 1

1. 创建Context：

   import { createContext } from 'solid-js';
   
   const UserContext = createContext();
   

   • createContext是Solid.js提供的用于创建上下文的函数。这里创建了一个名为UserContext的上下文，它将用于在组件树中传递数据。

2. 顶层组件中提供数据：

   import { Provider } from 'solid-js';
   
   const App = () => {
     const userLoginInfo = { username: 'testUser', loggedIn: true };
     return (
       <Provider of={UserContext} value={userLoginInfo}>
         {/* 其他子组件 */}
       </Provider>
     );
   };
   

   • Provider是用于将上下文数据提供给后代组件的组件。of属性指定要使用的上下文（这里是UserContext），value属性则是要传递的数据（这里是userLoginInfo，包含用户登录信息）。

3. 深层子组件中消费数据：

   import { useContext } from 'solid-js';
   
   const DeepChildComponent = () => {
     const userLoginInfo = useContext(UserContext);
     return (
       <div>
         {userLoginInfo.loggedIn && <p>Welcome, {userLoginInfo.username}</p>}
       </div>
     );
   };
   

   • useContext是用于在函数式组件中消费上下文数据的钩子。通过useContext(UserContext)，可以获取到顶层Provider传递下来的userLoginInfo数据，然后在组件中根据数据进行渲染。