13 行代码实现状态管理工具，敏捷高效

2023-11-21 12:58:45

破茧成蝶：超越传统的 React 状态管理

在 React 应用中，状态管理一直是绕不开的课题。我们常采用 Flux 架构或响应式架构来进行状态管理。然而，随着 Hooks 的横空出世，我们迎来了一场新的变革。Hooks 为我们提供了声明式 API，允许我们在函数组件中使用状态和其它 React 特性，而无需编写 class 组件。借助 Hooks 的强大能力，我们可以打造出更简洁、更易维护的状态管理解决方案。

13 行代码，打造专属状态管理工具

为了验证 Hooks 的非凡实力，我们仅需短短 13 行代码，就能实现一个功能完备的状态管理工具。让我们一探究竟：

import { useState, useEffect } from "react";

const useGlobalState = (initialState) => {
  const [state, setState] = useState(initialState);
  useEffect(() => {
    // 监听状态的变化
    console.log("State updated:", state);
  }, [state]);
  return [state, setState];
};

export default useGlobalState;

如此简单的代码，却蕴含着强大的力量。让我们逐行剖析它的奥秘：

首先，我们引入 useState 和 useEffect 这两个 Hooks，它们是构建状态管理工具的核心。
useGlobalState 函数接收一个初始状态 initialState 作为参数，并返回一个数组，其中包含当前状态和更新状态的函数。
在函数内部，我们使用 useState 创建一个可变状态 state，并使用 useEffect 监听 state 的变化。
当 state 发生变化时，useEffect 函数内的回调函数会被调用，我们可以在这里执行一些操作，例如记录状态的变化或触发某些副作用。

在 React 应用中使用自定义状态管理工具

现在，我们已经拥有了一个状态管理工具，接下来，让我们看看如何在 React 应用中使用它：

import useGlobalState from "./useGlobalState";

const MyComponent = () => {
  const [count, setCount] = useGlobalState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={incrementCount}>Increment count</button>
    </div>
  );
};

export default MyComponent;