什么是mobx-react？
mobx-react 是一个将MobX和React无缝结合的npm库，它允许您轻松地使用MobX来管理应用程序状态，并自动更新React组件。
在这篇文章中，我们将深入介绍如何使用mobx-react来构建React应用程序。我们还将探讨MobX的一些基本概念，例如observable, observer和action等。
安装
使用npm安装mobx-react：
--- ------- ---------- ------
使用mobx-react
要使用mobx-react，您需要将其导入到您的项目中：
------ - ----------- ------ - ---- ------- ------ - -------- - ---- -------------
observable
MobX中最重要的概念之一是observable。Observable是指可以观察到变化的值。当observable的值发生变化时，所有依赖于它的组件都将自动重新渲染。
下面是一个例子：
------ - ---------- - ---- ------- ----- ------- - ------------ ------ -- --- ------------- - -- -- --------
在这个例子中，我们创建了一个名为myState的observable对象，该对象具有一个名为count的属性。当我们更新count属性时，任何依赖于它的组件都会自动重新渲染。
observer
observer是一个高阶组件（higher-order component）,它将React组件转换为响应式组件。当我们将一个组件传递给observer时，它会自动追踪该组件所依赖的observable，并在observable发生变化时自动更新组件。
下面是一个例子：
------ - ---------- - ---- ------- ------ - -------- - ---- ------------- ----- ------- - ------------ ------ -- --- ----- ------- - ---------------- -- - ------ --------------------------- ---
在这个例子中，我们创建了一个名为Counter的组件，并将其传递给observer。Counter组件依赖于myState.count observable，因此它会在myState.count发生变化时自动重新渲染。
action
action是用来修改observable的值的函数。使用action可以确保修改observable的值是原子操作，即要么修改成功，要么回滚到原始状态。
下面是一个例子：
------ - ----------- ------ - ---- -------
------ - -------- - ---- -------------
----- ------- - ------------
------ --
---
----- -------------- - --------- -- -
----------------
---
----- ------- - ---------------- -- -
------ -
-----
--------------------------
------- ------------------------------------
------
--
---在这个例子中，我们创建了一个名为incrementCount的action，它会将myState.count的值增加1。我们将incrementCount传递给button的onClick事件，这样当按钮被点击时，incrementCount会被调用。
例子
下面是一个使用mobx-react的完整例子：
------ - ----------- ------ - ---- -------
------ - -------- - ---- -------------
----- ------- - ------------
------ --
---
----- -------------- - --------- -- -
----------------
---
----- ------- - ---------------- -- -
------ -
-----
--------------------------
------- ------------------------------------
------
--
---
------ ------- --------在这个例子中，我们创建了一个名为Counter的组件，该组件具有一个名为count的observable属性和一个名为incrementCount的`action
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34266