React 全局状态共享的 20 行精妙代码

2024-02-21 13:32:28

在 React 应用中，状态管理是一个重要课题。为了方便在不同组件之间共享状态，我们通常会使用 Redux 或 MobX 等第三方库。然而，这些库往往会引入额外的复杂性和学习成本。

那么，有没有一种更简单、更轻量的方法来实现 React 全局状态共享呢？

答案是肯定的。我们可以使用高阶组件（HOC）和 useContext Hook 来实现 React 全局状态共享。

1. 创建 Context 对象

首先，我们需要创建一个 Context 对象，该对象将用于在组件之间共享状态。

import { createContext } from "react";

const GlobalStateContext = createContext(null);

export default GlobalStateContext;

2. 创建高阶组件

接下来，我们需要创建一个高阶组件（HOC），该 HOC 将负责将全局状态传递给子组件。

import { useContext } from "react";

const GlobalStateHOC = (WrappedComponent) => {
  const globalState = useContext(GlobalStateContext);

  return <WrappedComponent globalState={globalState} />;
};

export default GlobalStateHOC;

3. 使用高阶组件

现在，我们可以使用高阶组件来包装需要访问全局状态的组件。

import GlobalStateHOC from "./GlobalStateHOC";

const MyComponent = (props) => {
  const { globalState } = props;

  return (
    <div>
      <h1>{globalState.count}</h1>
      <button onClick={() => globalState.setCount(globalState.count + 1)}>+</button>
    </div>
  );
};

export default GlobalStateHOC(MyComponent);

4. 在根组件中提供全局状态

最后，我们需要在根组件中提供全局状态。

import React, { useState } from "react";
import GlobalStateContext from "./GlobalStateContext";
import MyComponent from "./MyComponent";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <GlobalStateContext.Provider value={{ count, setCount }}>
      <MyComponent />
    </GlobalStateContext.Provider>
  );
};

export default App;