在前端开发中，我们通常需要管理全局状态，并能够在多个组件之间共享和变更状态。而在 React 生态中，carryon 就是一个非常好用和易于学习的状态管理工具。
简介
carryon 是一个 win-streak 贡献的开源 npm 包，提供了针对 React 应用的状态管理解决方案。它包含优雅而简单的状态管理 API，可以极大地提高我们的开发效率、代码的可读性和可维护性。
carryon 的最初目标是为 React 应用提供轻便的状态管理，它的定位非常明确：提供极简的 API 和最小化的内部状态管理。与 Redux 这样的工具相比，carryon 比较轻量，也更适合小型应用。但它同样可以通过扩展 API 和插件提供不错的中小型应用支持。利用 carryon，我们可以轻松地管理复杂的数据流和状态变更，同时还有优秀的 TypeScript 支持。
安装
使用 npm 安装 carryon：
$ npm install carryon
开始使用
首先，把 carryon 引入我们的 React 应用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --------------- - ---- ----------
----- --------- - -
------ --
--
-- ----- -----
----- ----- - ---------------------------
-------- --------- -
------ -
-----
------ -------------------
------- ----------- -- ---------------- ------ ----------------- - - ----
----- --
---------
------
--
-
-------- ----- -
------ -
----------
-------- --
-----------
--
-
------ ------- ----以上代码实现了一个简单的计数器，我们创建了一个 store 对象并传给了 createContainer 函数，然后在 Counter 组件中使用 store 对象来展示和修改 count 的值。
可以看到，carryon 中最核心的概念就是 store 文件，它是一个状态数据容器，并用于存储应用内的全局状态和组件之间共享的状态。
当你需要在某个组件中读取和更新状态时，只需要通过 useContainer 查询 store 中的状态， 或者调用 setState 更新状态即可。在使用后，React 会自动管理组件更新。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ----------
-------- --------- -
----- - ------ -------- - - ----------------------
----- --------- - -- -- -------------- - ---
----- --------- - -- -- -------------- - ---
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
------ ------- --------在以上代码中，我们使用 useContainer 从 store 中查询刚刚定义的 count 变量的值，并使用 setCount 来修改它的值。
除此之外，carryon 还提供了一些额外的 API，如 dispatch，和 setContext 等，来帮助我们更好的管理全局状态和数据流。
API 详解
useContainer
用于从 store 中读取数据和设置数据更新回调。
import { useContainer } from 'carryon';
const { data, setData } = useContainer(key);参数：
- key: string，对象状态的键名。
返回值：
- data: any，对象状态的值。
- setData: Function，用于修改 key 对应对象的状态，并且为下一次 React 更新注册。
setContainer
用于从 store 中直接修改整个对象。
import { setContainer } from 'carryon';
setContainer('key', object);参数：
- key: string，对象状态的键名。
- object: any，需要修改的键值对。
返回值：
无
dispatch
用于触发状态更改回调。
import { dispatch } from 'carryon';
dispatch('key', ...args);参数：
- key: string，所触发的回调键名。
- args: any[]，回调函数的参数。
返回值：
无
setContext
用于设置组件上下文环境。
import { setContext } from 'carryon';
setContext(contextObj);参数：
- contextObj: object，需要设置的上下文环境变量。
返回值：
无
总结
carryon 是一个非常优秀的状态管理工具，使用非常简单，而且支持所有级别的开发者。希望这篇文章能够为你学习 carryon 提供帮助，同时也增进了解状态管理工具的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a081e8991b448e999f