如何设置 React Context, useContext Hook

在 React 应用程序中，有时候需要在组件树中共享数据。Context API 和 useContext Hook 是解决这个问题的好方法。

React Context

React Context API 是一个全局对象，用于跨组件层级传递数据，而不必手动将 props 由一个组件传递到另一个组件。常常用于 Theme、语言、认证等数据方面。

在创建一个 Context 对象时，我们需要提供一个默认值：

import { createContext } from 'react';

const MyContext = createContext(defaultValue);

我们可以在应用程序的根组件中渲染 Provider，然后将数据作为 value 属性传递，这样 Provider 以及它之下的所有组件都可以访问到该数据：

import { MyContext } from './MyContext';

function App() {
  const contextValue = {...};

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

我们可以在一个组件中使用 Consumer 或 useContext Hook 来访问 Context 中的数据：

import { MyContext } from './MyContext';

function SecondComponent() {
  const { data } = useContext(MyContext);

  // 使用 data...
}

当然，我们还可以嵌套多种 provider 实现多个 Context 的管理。

useContext Hook

useContext 是 React 提供的一个 Hook，用于在函数组件中访问 Context 数据。

我们可以使用它来获取在 Provider 组件中提供的数据：

import { useContext } from 'react';
import { MyContext } from '.MyContext';

function MyComponent() {
  const { data } = useContext(MyContext);

  // 使用 data...
}

当然，我们可以在一个组件中订阅多个 Context 数据，绝不会产生冲突。

注意事项

• 当使用 useContext 时，请确保在与 Context 在同一个渲染树中，而不是深层嵌套在嵌套组件。
• 当在函数组件中使用 useContext 时，请确保将 Context 对象作为参数传递给函数。
• 推荐将值设为对象，而非使用原始类型。