介绍
react-globally 是一个 React 应用中全局状态管理的库。它允许你在应用程序中创建一个全局的状态管理器，使得状态能够被任何组件访问和使用。它的设计目的是使得应用程序更容易管理和扩展，并避免了冗余的状态管理代码。下面我们将详细介绍如何使用这个库。
安装和配置
要使用 react-globally，首先需要在项目中安装它。使用 npm，可以通过以下命令进行安装：
npm install react-globally --save
安装完成后，你需要在你的应用程序中将它引入。在你的主组件中，添加以下代码：
-- -------------------- ---- -------
------ -------------- ---- -----------------
-------- ----- -
------ -
----------------
--- --------- ---
-----------------
--
-
------ ------- ----在这个例子中，我们使用了一个名为 GlobalProvider 的组件。这个组件会在应用程序中创建一个全局状态管理器。相应地，在这个包暴露的 API 中还有 GlobalConsumer 组件，该组件用于从全局管理器中获取和使用状态。
使用指南
使用 react-globally 需要按以下步骤进行：
创建和更新状态
要在状态管理器中创建或更新状态，请使用 GlobalProvider 组件提供的 setGlobal 方法。只需传递一个对象作为参数，其中包含将被创建或更新的状态，代码如下：
import { setGlobal } from 'react-globally';
setGlobal({
username: 'John Doe',
isLoggedIn: false
});在这个例子中，我们创建了两个状态 username 和 isLoggedIn。初始值分别为 'John Doe' 和 false。
在组件中使用状态
要在组件中使用全局状态，首先需要在组件中引入 GlobalConsumer 组件。然后，使用该组件来使用全局状态。
-- -------------------- ---- -------
------ - -------------- - ---- -----------------
-------- ---------------- -
------ -
----------------
------------ -- -
-----
--------------------- - -
----------- ---------------------------
- - --------- --- --------
------
--
-----------------
--
-在这个例子中，GlobalConsumer 用于将全局状态注入到这个组件中。我们可以通过 globalState 属性来访问全局状态中的 username 值。如果 username 存在，我们将其用于输出欢迎消息。
更新全局状态
要更新全局状态，请使用 setGlobal 方法并提供所需的更新值。
import { setGlobal } from 'react-globally';
function handleLogin() {
setGlobal({
isLoggedIn: true
});
}在这个例子中，我们将 isLoggedIn 的状态更新为 true。这意味着用户现在已经登录了。
示例代码
下面是一个完整的应用程序使用 react-globally 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- --------------- --------- - ---- -----------------
-----------
--------- ----- -----
----------- -----
---
-------- ----- -
------ -
----------------
--------------- --
------------ --
-----------------
--
-
-------- ---------------- -
------ -
----------------
------------ -- -
-----
--------------------- - -
----------- ---------------------------
- - --------- --- --------
------
--
-----------------
--
-
-------- ------------- -
-------- ------------- -
-----------
----------- ----
---
-
------ -
------- ------------------------- -----------
--
-
------ ------- ----在这个例子中，我们创建了一个名为 WelcomeMessage 的组件，该组件使用 GlobalConsumer 来访问和显示全局状态中的 username 值。我们还创建了一个名为 LoginButton 的组件，该组件使用 setGlobal 来更新全局状态中的 isLoggedIn 值。最后，我们在主程序中引入了这两个组件，并使用 GlobalProvider 来创建一个全局状态管理器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567d481e8991b448e40c3