React 实现全局状态管理的一种方案_react 全局状态管理

本文以计数器组件的开发为例子，介绍一种使用 React Hooks 实现全局状态管理的方法。

简单的计数器组件

在下面的代码定义了一个简单的计数器组件 Counter，从 0 开始计数，每点击一次计数器加一：

const Counter = ({ text }) => {
  const [count, setCount] = useState(0);
  const addCount = () => setCount(count + 1);

  return (
    <div onClick={addCount}>
      {text}: {count}
    </div>
  );
}; 
1
2
3
4
5
6
7
8
9
10

我们可以对上面的 Counter 做进一步抽象，用一个自定义的 Hooks useCounter 来实现计数逻辑：

const useCounter = (initCount) => {
  const [count, setCount] = useState(initCount || 0);
  const addCount = () => setCount(count + 1);

  return [count, addCount];
};

const Counter = ({ text }) => {
  // 使用自定义 Hooks useCounter
  const [count, addCount] = useCounter(0);
  return (
    <div onClick={addCount}>
      {text}: {count}
    </div>
  );
}; 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

两段代码实现的计数器组件功能有任何区别，我们使用 Counter 组件来实现两个计数器：

const App = () => {
  return (
    <div>
      <Counter text="计数器1" />
      <Counter text="计数器2" />
    </div>
  )
} 
1
2
3
4
5
6
7
8

代码示例如下：

代码片段

计数器支持初始值

上面示例中的两个计数器之间是独立计数的，没有任何关联。接下来对 Counter 组件做一些改造，增加了一个 props 参数 initCount，可以通过 initCount 来设置计数器的初始值。

const useCounter = (initCount) => {
  const [count, setCount] = useState(initCount || 0);

  // 组件更新自己的计数，每次执行时 count 加 1
  const addCount = () => setCount(count + 1);

  // 拿外面的最新计
1
2
3
4
5
6