常见场景
在一些 Web 应用开发中，数据传递和状态管理是非常重要的，尤其是对于复杂的页面和组件的交互。常见的做法是使用全局变量，但这种方式在维护上存在问题，因为难以追踪数据的来源和变化过程。而现代前端框架通常采用状态管理，如 Redux、Vuex 等，但这些方案对于小型项目或组件而言可能过于繁琐。因此，使用一个简单易用的、小巧的状态管理工具，成为了前端开发中必不可少的一环。
在这里，我想介绍一个非常不错的 npm 包 kontext，它是近期出现的一个轻量级状态管理工具，它允许您轻松地在 React 应用中管理状态。
kontext 的使用方法
安装 kontext
安装 kontext 只需要 1 条命令：
npm install kontext
创建状态容器
在 React 应用中使用 kontext，需要创建一个容器（即一个状态管理对象），来存储共享的数据和方法。
下面是一个简单的示例，用于存储用户信息。
-- -------------------- ---- ------- ------ - ------------- - ---- ---------- ----- ----------- - --------------- --------- --- ------ --- ------------ -- -- --- --- ------ ------- ------------
在 createContext 函数中，可以定义初始状态（本例中包括用户名、邮箱）和默认方法。
使用状态容器
在组件中使用 kontext，只需要在容器的子组件中调用 useContext 函数即可。如下是一个用法示例。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ ----------- ---- ----------------
-------- ---------- -
----- - --------- ----- - - ------------------------
------ -
-----
------------ --------------
--------- -----------
------
--
-更新状态容器
状态容器的状态更新需要通过默认方法来执行，如下所示。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ ----------- ---- ----------------
-------- -------------- -
----- - ----------- - - ------------------------
-------- ------------------- -
-----------------------
----- -------- - --- -----------------------
----- -------- - -------------------------
----- ----- - ----------------------
-------------
---------
------
---
-
------ -
----- ------------------------
-------
---------
------ ----------- --------------- --
--------
-------
------
------ ----------- ------------ --
--------
------- -----------------------------
-------
--
-在这里，我们创建了一个表单组件 EditUserInfo，当用户修改信息后，通过 setUserInfo 方法来更新 UserContext 中的状态。
共享状态容器
既然 kontext 可以将状态共享给所有子组件，那么多个组件之间共享同一个状态容器，也是支持的。这样可以使得组件之间状态的流转更加清晰和简洁。下面是一个示例，实现了多个组件之间对一个计数器进行业务逻辑操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ----------
----- ------------ - ---------------
------ --
--------- -- -- ---
--------- -- -- ---
---
-------- --------- -
----- - ------ --------- -------- - - -------------------------
------ -
-----
--------- -----------
------- -----------------------------
------- -----------------------------
------
--
-
-------- --------------- -------- -- -
----- ------- --------- - ------------------
-------- ---------- -
-------------- -- ----- - ---
-
-------- ---------- -
-------------- -- ----- - ---
-
----- ----- - ---------------- -- -- ------ --------- -------- --- -
------
---
------ -
---------------------- ------------------------------------------------
--
-
-------- ----- -
------ -
---------------
-------- --
----------------
--
-在这个示例中，我们创建了一个计数器组件 Counter，它通过 useContext 函数来获取共享状态容器 CountContext 中的计数器值、增加和减少方法。然后，我们创建了一个状态容器组件 CountProvider，它使用 React.useState 定义初始状态（即计数器初始值为 0），并将初始状态、容器中的方法通过 React.useMemo 包裹后传递给 CountContext.Provider。最后，在主组件 App 中将 CountProvider 和 Counter 组件结合在一起。
结语
通过上述介绍，相信您已经能够基本掌握 kontext 的用法了。掌握 kontext，可以使您的 React 应用的状态管理更加简单和优雅，同时又不会牺牲可读性和可维护性。如果您遇到了 React 状态管理上的问题，不妨尝试一下 kontext，相信会给您带来不一样的体验和启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e03a5