前端面试题：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);