前言
@baublet/use-global-state 是一个用于管理 React App 全局状态的 npm 包。它使用了 React Hooks 的功能，可以让你在 React 函数组件间共享状态，通过应用程序中的每个组件中使用的单一状态对象来实现全局状态的管理。
这篇文章将会讲述@baublet/use-global-state的使用方法以及其核心特性。
安装
你可以使用你的包管理工具，如npm或者yarn，去安装@baublet/use-global-state。
npm install --save @baublet/use-global-state
如果你的项目是使用yarn管理的，可以运行以下命令
yarn add @baublet/use-global-state
使用方法
首先，在你的 React App 中导入使用。
import useGlobalState from '@baublet/use-global-state';
然后，你可以通过以下方式创建一个全局状态。
const [globalState, setGlobalState] = useGlobalState({
count: 0,
text: '',
obj: {
prop: '',
},
arr: [],
});这里我们创建了一个包含count、text、obj以及arr属性的全局状态，可以在组件中任意地获取或更新该全局状态。
获取全局状态
通过在组件中使用创建的全局状态名称，我们可以获取该全局状态。
-- -------------------- ---- -------
----- ------------- --------------- - ----------------
------ --
---
------ -
-----
---------- ------------------------
------
--上面的代码中，我们从全局状态中获取了count属性，并将其包含在组件中。
更新全局状态
我们可以通过setGlobalState函数更新全局状态。
-- -------------------- ---- -------
----- ------------- --------------- - ----------------
------ --
---
----- ----------- - -- -- -
---------------- ------ ----------------- - - ---
--
------ -
-----
---------- ------------------------
------- ------------------------------- --------------
------
--上面的代码中，我们从全局状态中获取了count属性，并为组件中的按钮添加了一个点击事件，每次点击会使用setGlobalState()更新全局状态。
监听全局状态变化
如果你需要在全局状态发生变化时执行某些操作，可以使用useEffect()函数。
-- -------------------- ---- -------
----- ------------- - ----------------
------ --
---
------------ -- -
---------------- -------- -------------------
-- ---------------------
------ -
-----
---------- ------------------------
------
--上面的代码中，我们使用了useEffect()函数来监听全局状态中count属性的变化，并在变化时使用console.log()打印其新值。
Conclusion
通过使用@baublet/use-global-state，我们可以轻松地管理 React App 中的全局状态。在编写大型React应用程序时，全局状态管理是非常重要的，使用该npm包可以让你的代码更加简洁和易于管理，提高你的React开发效率。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b08