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