React 中的 createContext 和 useContext 分别有什么用？

在 React 中，createContext 和 useContext 是处理上下文的两个相关 API，但它们的功能和用途有所不同：

1. createContext

• 作用：用于创建一个新的上下文对象。

• 用法：调用 createContext 会返回一个上下文对象，这个对象包含 Provider 和 Consumer 组件。Provider 用于提供上下文的值，而 Consumer 用于消费上下文的值。

• 示例：

  // 创建上下文对象
  const MyContext = createContext(defaultValue);
  
  // 提供上下文的值
  <MyContext.Provider value={someValue}>
    {/* 子组件 */}
  </MyContext.Provider>
  
  // 消费上下文的值
  <MyContext.Consumer>
    {value => /* 使用上下文的值 */}
  </MyContext.Consumer>
  

2. useContext

• 作用：用于在函数组件中访问上下文的值。

• 用法：useContext 是一个 Hook，用于在函数组件中消费上下文的值，而不需要使用 Consumer 组件。

• 示例：

  import { useContext } from "react";
  
  // 在函数组件中访问上下文
  const value = useContext(MyContext);