面试题：Solid.js中如何利用Context和自定义Hooks实现跨组件状态共享

Question

请描述在Solid.js中，如何通过Context与自定义Hooks结合的方式，将一个父组件中的状态传递给深层嵌套的子组件，且保证状态更新时子组件能及时响应。请给出具体的代码示例和实现思路。

Answer 1

实现思路

1. 创建Context：使用 createContext 创建一个上下文对象，这个对象将用于在组件树中传递数据。
2. 自定义Hooks：创建一个自定义Hook，在这个Hook中使用 useContext 来获取上下文数据，并返回需要在子组件中使用的数据和更新函数（如果需要更新状态的话）。
3. 父组件提供数据：在父组件中，通过 Context.Provider 提供状态数据，使得后代组件可以访问到该数据。
4. 子组件消费数据：深层嵌套的子组件通过调用自定义Hook来获取和使用父组件传递的数据，并且当状态更新时会自动重新渲染。

代码示例

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

// 创建Context
const MyContext = createContext();

// 自定义Hook
const useMyContext = () => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error('useMyContext must be used within a MyContext.Provider');
  }
  return context;
};

// 父组件
const Parent = () => {
  const [count, setCount] = createSignal(0);

  const contextValue = useMemo(() => ({
    count,
    increment: () => setCount(count() + 1)
  }), [count]);

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

// 深层嵌套的子组件
const Child = () => {
  const { count, increment } = useMyContext();
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

在上述代码中：

1. MyContext 是创建的上下文对象。
2. useMyContext 自定义Hook用于在子组件中获取上下文数据。
3. Parent 组件中创建了 count 状态和更新函数 setCount，并通过 MyContext.Provider 传递 contextValue，其中包含 count 和 increment 函数。
4. Child 组件通过 useMyContext Hook获取 count 和 increment，并在界面中展示和使用。当点击按钮调用 increment 函数更新 count 时，Child 组件会自动重新渲染。