前言
对于前端开发者来说，使用 npm 包已经是家常便饭了。npm 上有各种丰富的开源项目和工具库，让我们的开发事半功倍。而在这些库中，@art-of-coding/eshu 可能是一个相对陌生的名称，本文将向大家介绍 @art-of-coding/eshu 的使用方法及其在前端开发中的应用。
什么是 @art-of-coding/eshu？
@art-of-coding/eshu 是一个轻量的状态管理工具，它可以帮助我们在 React 项目中更方便地管理组件的状态。相较于 react-redux 等库，它更加简单易用，不需要配置繁琐的 Provider 和 Connect，只需要在组件内部实例化一个 Eshu 即可。
@art-of-coding/eshu 的主要特点如下：
- 简单的 API：只需要在组件内实例化一个 Eshu 即可，不需要配置 Provider 和 Connect；
- 轻量级：整个包只有几百行代码，打包后的体积非常小；
- 自定义 Context：如果你需要共享状态到非父子组件，你可以自定义一个 Context 进行共享；
- 高效：Eshu 使用 immer 库来更新状态，保证每次状态更新时只会更新实际发生了变化的部分，减少了重复渲染的次数。
如何使用 @art-of-coding/eshu？
安装
在使用 @art-of-coding/eshu 之前，我们需要先安装它。可以使用 npm 或 yarn 进行安装：
npm install --save @art-of-coding/eshu # 或 yarn add @art-of-coding/eshu
基本使用
在一个 React 组件中，我们可以通过以下代码来使用 @art-of-coding/eshu：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ----------------------
-------- --------- -
----- ------- --------- - --- ------ ------ - ---
-------- ------------- -
-------------- -- -
----------- -- --
---
-
------ -
-----
--------- -----------------
------- ----------------------------------------
------
--
-在上面的代码中，我们首先通过 import 引入了 Eshu，接着在组件中实例化了一个 Eshu，把初始状态设为 { count: 0 }。我们在组件内部定义了一个 handleClick 函数，点击按钮时会更新 count 属性。这里我们使用了 immer 库，它能够帮我们更新状态，同时不会直接修改原始数据。最后，我们将 count 属性渲染到页面上。
在多个组件中共享状态
有时候，我们开发的组件可能不是父子关系，但是它们需要共享一些状态，这时候我们可以使用 Eshu 提供的 Context API 来实现。下面的例子展示了如何通过自定义 Context 来让两个组件共享一个 Eshu 实例：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ ---- ---- ----------------------
----- ----------- - ----------------------
-------- -------- -
----- - ------ -------- - - ------------------------
-------- ------------- -
-------------- -- -
----------- -- --
---
-
------ -
------- ------------------------------- ------- -----------------------
--
-
-------- --------- -
----- ------- --------- - --- ------ ------ - ---
------ -
--------------------- -------- ------ -------- ---
-----
--------- -----------------
------- --
------
-----------------------
--
-在上面的例子中，我们首先定义了一个 EshuContext，它是一个 React Context 对象。在 Counter 组件中，我们实例化了一个 Eshu，然后将它作为 value 传递给了 EshuContext.Provider 组件。在 Button 组件中，我们使用 useContext 钩子来获取到 Eshu 实例，通过 setState 来更新状态。
在实际项目中的应用
在实际的项目中，我们可以将 @art-of-coding/eshu 应用到各种场景中，下面的例子展示了如何通过 Eshu 实现一个简单的 todoList：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ----------------------
-------- ---------- -
----- ------- --------- - --- ------ ------ -- ---
----- ------- --------- - -------------------
-------- --------------- -
-------------------
-------------- -- -
------------------ --- ----------- ----- ----- ---
---
-------------
-
-------- ---------------- -
-------------- -- -
----------- - ----------------------- -- ------- --- ----
---
-
------ -
-----
----- ------------------------
------ ------------- ----------- -- ------------------------- --
------- --------------------------
-------
----
--------------------- -- -
--- --------------
------------- --
------- ----------- -- --------------------------------------
-----
---
-----
------
--
-在上面的代码中，我们首先定义了一个 Todos 数组，然后在表单提交时将输入框的内容作为一个新的 todo 添加到 Todos 中。我们将 Todos 数组渲染为一个列表，并提供了删除功能，点击删除按钮时会将对应的 todo 从 Todos 中删除。这里我们使用了 Eshu 来管理 Todos 数组的状态。
总结
@art-of-coding/eshu 是一个非常简单易用的状态管理库，对于想要避免使用繁琐的 react-redux 以及其它状态管理库的前端开发者来说，它是一个不错的选择。在本文中，我们介绍了 @art-of-coding/eshu 的基本使用方法及其在实际项目中的应用。如果你对它感兴趣，不妨试着在下一个项目中尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacb1