Mobx 是一种 JavaScript 状态管理库，用于在 React 应用程序中管理应用程序状态。它提供了简单的方法来使状态易于管理和维护。
安装 Mobx
使用 npm 可以轻松安装 Mobx：
--- ------- ----
创建一个可观察对象
首先，让我们创建一个可观察对象（Observable Object）。可观察对象是指包含需要跟踪的数据属性的普通 JavaScript 对象。
------ - ---------- - ---- ------
----- --------- - ------------
------ ---
------------- -
---------------------
--
--- ------- -
------ -----------------
-
--
------ ------- ---------这里我们定义了一个 todoStore 对象，它有一个数组 todos、一个添加新 todo 的方法 addTodo 和一个返回当前待办事项数量的计算属性 count。observable 函数将此对象转换为可观察对象。
在组件中使用 Mobx
接下来，我们要在 React 组件中使用 Mobx。让我们看一下如何在组件中使用 @observer 装饰器来自动更新组件，从而实现响应式渲染：
------ ------ - --------- - ---- -------
------ - -------- - ---- ------------
------ --------- ---- -------------
---------
----- -------- ------- --------- -
------------ - --- -- -
------------------
-----------------------------------
---------------- - --
-
-------- -
------ -
-----
----
--------------------------- ------ -- -
--- -----------------------
---
-----
----- -----------------------------
------ ----------- ------------ -- ----------- - ------- --
------- ----------------- -------------
-------
--------- -- ------ ---------------------
------
-
-
-
------ ------- --------在这个示例中，我们使用了 @observer 装饰器将 TodoList 组件转换为可观察组件。当 todoStore.todos 数组发生变化时，TodoList 组件会自动重新渲染。
总结
Mobx 提供了一种简单的方法来管理 React 应用程序的状态。通过创建可观察对象并在组件中使用 @observer 装饰器，我们可以轻松实现响应式渲染和状态管理。
希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32352