React useContext：与共享状态交朋友

2023-12-18 01:39:35

导言：Context API 的力量

Context API 是 React 中的一项强大功能，允许我们在整个组件树中共享数据。它引入了 Context 对象的概念，其中包含要共享的数据。我们通过 useContext Hook 访问 Context 对象。

用 useContext 访问共享状态

useContext Hook 使用一个 Context 对象作为其唯一参数。它返回 Context 对象中存储的当前值。以下示例展示了如何使用 useContext 获取共享状态：

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

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

更新共享状态：Provider 和 Consumer

要更新共享状态，我们需要使用 React 的 Context 提供程序和使用者组件。Provider 组件提供 Context 对象，而 Consumer 组件使用 useContext Hook 访问它。

import { createContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = (props) => {
  const [state, setState] = useState(0);
  return <MyContext.Provider value={{ state, setState }} {...props} />;
};

const MyConsumer = () => {
  const value = useContext(MyContext);
  return <div>{value.state}</div>;
};

真实世界的用例：全局状态管理

useContext 对于管理全局状态特别有用。例如，我们可以使用它来维护认证信息或用户偏好。以下代码段显示了如何使用 useContext 管理全局用户偏好：

const UserPreferencesContext = createContext();

const UserPreferencesProvider = (props) => {
  const [preferences, setPreferences] = useState({ theme: 'light' });
  return <UserPreferencesContext.Provider value={{ preferences, setPreferences }} {...props} />;
};

const MyComponent = () => {
  const preferences = useContext(UserPreferencesContext);
  return <div>当前主题：{preferences.theme}</div>;
};