React Hooks：简单易行的全局状态共享方案

前端

2023-10-28 14:26:05

在 B 端项目中，我们经常需要在跨组件甚至整个系统范围内共享一些全局状态，例如当前用户信息、业务状态等。要解决这一需求，业界通常会采用以下成熟方案：

Redux：一个集中的状态管理库，具有单向数据流和中间件支持。
MobX：一个基于观察者模式的状态管理库，具有可变状态和自动依赖跟踪。
Context API：React 内置的一个 API，允许我们在组件树中传递状态和数据。

本文将重点介绍利用 React Hooks 实现全局状态共享的方案，它是一种简单易行且适合小型项目的轻量级解决方案。

React Hooks 是 React 16.8 版本引入的一项新特性，它允许我们在函数组件中使用状态和生命周期方法。与传统的类组件相比，Hooks 具有以下优点：

简洁性： Hooks 采用声明式语法，无需编写繁琐的类声明。
可复用性： Hooks 可以轻松地跨组件复用，促进代码组织和维护。
更好的性能： Hooks 通过跳过组件实例化过程，可以提高应用程序性能。

要使用 Hooks 实现全局状态共享，我们可以创建如下步骤：

创建一个 Context 对象： 创建一个 React Context 对象，它将包含我们的全局状态。
使用 useState Hook 创建状态： 在我们的顶级组件中，使用 useState Hook 创建全局状态。
用 Context.Provider 提供状态： 将我们的 Context 对象包装在一个 Context.Provider 组件中，它将我们的状态提供给子组件。
在子组件中使用 useContext Hook： 在需要访问全局状态的子组件中，使用 useContext Hook 来获取状态。

下面是一个示例代码，演示如何使用 Hooks 实现全局状态共享：

// 创建一个 Context 对象
const GlobalStateContext = React.createContext();

// 创建顶级组件，用于创建和提供全局状态
const GlobalStateProvider = ({ children }) => {
  const [globalState, setGlobalState] = React.useState({
    user: null,
    isLoading: true,
  });

  return (
    <GlobalStateContext.Provider value={{ globalState, setGlobalState }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

// 在子组件中使用 useContext Hook 获取全局状态
const MyComponent = () => {
  const { globalState, setGlobalState } = React.useContext(GlobalStateContext);

  // 在此可以使用全局状态和更新函数
  return <div>当前用户：{globalState.user}</div>;
};