ReactUse createGlobalState 源码解析

2024-02-07 23:57:49

前言

在 React 中，状态管理是一个重要且常见的需求。为了在组件之间共享状态，我们可以使用各种状态管理库，如 Redux、MobX 或直接使用 React 的 Context API。然而，对于一些简单的场景，我们可以使用 React Hook useGlobalState 来轻松创建全局共享状态。

函数重载

useGlobalState 函数有两种重载形式：

useGlobalState<S>(initialState: S | (() => S)): [S, (newState: S | ((prevState: S) => S)) => void];
useGlobalState<S, A>(initialState: S | (() => S), actionReducer: (state: S, action: A) => S): [S, (action: A) => void];

第一种形式用于创建只读的全局状态，而第二种形式则用于创建可读写的全局状态。在第一种形式中，我们传入一个初始状态，它可以是一个值或一个函数。如果是一个函数，则它会在每次组件渲染时被调用来计算初始状态。第二种形式中，除了初始状态，我们还需要传入一个 actionReducer 函数，它用于处理状态更新。

useLayoutEffect

在 useGlobalState 函数中，我们使用了 useLayoutEffect Hook 来更新组件状态。与 useEffect Hook 不同，useLayoutEffect 会在浏览器完成渲染后立即执行，因此我们可以确保在组件渲染后立即更新状态。这对于某些场景非常重要，例如我们需要在组件渲染后立即滚动到某个位置。

useReducer

在 useGlobalState 函数的第二种重载形式中，我们使用了 useReducer Hook 来管理状态更新。useReducer Hook 可以让我们轻松地管理复杂的状态更新逻辑。它接受一个 reducer 函数和一个初始状态，并返回一个状态值和一个 dispatch 函数。每次我们需要更新状态时，我们调用 dispatch 函数，然后 reducer 函数就会被调用来计算新的状态。