简介
@dannsam/mobx 是一个基于 MobX 5.x 版本的封装库，提供了一系列便利的 API，使开发人员可以更加便捷地创建响应式应用程序。其集成了 MobX 的核心库，并且主要针对 React 应用程序的状态管理进行优化。
本文将分步骤地介绍如何使用 @dannsam/mobx 库来开发 React 应用程序。并且将会提供示例代码以帮助读者更好地理解。
安装
使用 npm 安装 @dannsam/mobx：
npm install @dannsam/mobx --save
或者使用 yarn：
yarn add @dannsam/mobx
安装完成后，你就可以在项目中引用它了。
集成 MobX
@dannsam/mobx 是基于 MobX 的，因此你需要在你的应用中引入 MobX。在 React 应用程序中，通常会将 MobX 集成到顶层组件中，使其成为整个应用程序的状态管理器。
下面是一个示例程序，使用了 @dannsam/mobx 和 MobX 5.x：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- ---------------------
------ - --------- - ---- ------
------ --- ---- -------
------ ----- ---- ---------
----------- --------------- ---------- --
----------------
--------- --------------
---- --
------------
-------------------------------
-这里的 store 是一个普通的 JavaScript 对象，它具有一些可观察的属性。在后面的内容中，我们将会详细讲解如何创建一个 store。
注意，在上面的代码中，我们使用了 Provider 组件。这是 @dannsam/mobx-react 包中提供的组件，它会将 store 对象传递给所有应用程序组件。
创建 Store
在 MobX 中，Store 是一个包含可观察属性和计算结果（@computed）的简单 JavaScript 对象。一个 Store 类似于全局状态，并且在整个应用程序中可被访问。
下面是一个示例 store，它包含一个名为 items 的可观察属性和一个名为 addItem 的方法：
-- -------------------- ---- -------
------ - ----------- ------ - ---- ---------------
----- ----- -
----------- ----- - --
------- ------- ------ -
---------------------
-
-
----- ----- - --- -------
------ ------- -----在上面的代码中，我们首先使用 @dannsam/mobx 中的 observable 装饰器来定义了一个可观察属性 items。然后，我们使用 @action 装饰器来定义了一个方法 addItem，以便往 items 数组中添加一个元素。最后，我们实例化了 Store 并将其导出。
在组件中使用 Store
在组件中使用 Store 是非常简单的。我们可以通过在组件中使用 @inject 和 @observer 装饰器来将 Store 的属性注入到组件中，从而实时响应任何属性的变化。
下面是一个示例组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- -------- - ---- ---------------------
----------------
---------
----- ---- ------- --------- -
------- - -- -- -
----- ---- - ------------- ---- -------
------------------------------
-
------ -- -
----- - ----- - - ----------
------ -
-----
------- -------------------------- -------------
----
----------------------- -- -- -
--- -------------------
---
-----
------
-
-
-
------ ------- ----在上面的代码中，我们使用 @inject 装饰器来将 store 属性注入到组件中。然后，我们使用 @observer 装饰器来使组件成为一个mobx观察者，实时响应 store 属性的任何变化。
总结
在本教程中，我们使用了 @dannsam/mobx 和 MobX 5.x 来创建了一个简单的 React 应用程序。我们介绍了如何集成 MobX、如何创建 Store，以及如何在组件中使用 Store。希望本篇文章能够帮助读者快速上手使用 @dannsam/mobx 来创建响应式应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005678781e8991b448e3e90