前言：在前端开发中，状态管理是必不可少的部分。针对 React 的状态管理，Redux 处理起来有些繁琐，热度不如从简单的状态管理库折中方案 preact-tiny-atom。
preact-tiny-atom 简介
preact-tiny-atom 是一款轻量级的状态管理库，它与 Preact 搭配使用效果更佳。其使用方便，API 很少，但基本满足了 Preact 项目的状态管理需求。
与 Redux 不同，preact-tiny-atom 在状态管理上并不引入全局单一状态树。相反，它支持以多个独立的状态树管理不同的状态。
安装使用
安装
通过 npm 安装：
--- ------- ------ ----------------
或通过 yarn 安装：
---- --- ----------------
使用
preact-tiny-atom 可以在您的组件甚至跨组件以更优雅的方式共享应用程序状态。
在代码中引入 preact-tiny-atom：
------ - ---- - ---- -------------------
接下来，创建 atom（状态树）。您可以为 atom 提供默认值，也可以在 atom 上订阅变化。
----- ---------- - ------ ----- --- ------ -- --- ---------------------------- -- - ------------------------ ---
通过 getter 和 setter 读写 state 值：
----- ---- - ---------------------- ------------------ -- ------- - ----------
下面是一个完整的示例，我们将创建一个 todo list 应用程序：
------ - ---- - ---- -------------------
------ - -- ------ - ---- ---------
----- -------- - ------ ------ --- ------------ -- ---
-------------------------- -- -
----------- ---------- --- ---------------
---
-------- ----- ------ ----------- -- -
-------- --------------------- -
-------------------- -- -
----------------- - -------------------
---
-
-------- --------- -
-------------------- -- -
------------------------------
----------------- - ---
---
-
------ -
-----
------ ----------- ------------------- ------------------------ --
------- ------------------------------
----
----------------- -- -
---------------
---
-----
------
--
-
----------- ------------------- --- ---------------通过上面这个示例，我们可以看到，在使用 preact-tiny-atom 时，代码更为简洁明了，并且可以让我们轻松地实现状态管理。
小结
preact-tiny-atom 虽然 API 很少，但是它足以满足我们在 Preact 项目中的状态管理需求。在 Preact 项目中使用 preact-tiny-atom ，可以减少代码量和复杂度，提升代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600561bf81e8991b448df5d6