1. 简介
mobx-state-tree 是一个由 MobX 团队开发的用于构建可扩展且易维护的应用程序的工具。这个工具使用了 mobx 来构建 React 组件树，并同时提供了 semantical，强类型化的 model 层，方便管理和修改数据状态。
mobx-state-tree-boiler-plate 就是针对上面提到的 mobx-state-tree 的一个快速脚手架，方便开发者能够快速使用 mobx-state-tree 来构建自己的应用程序。
2. 安装和使用
2.1 安装
使用 npm 进行安装：
npm i mobx-state-tree-boiler-plate
2.2 使用
安装好以后，在项目中 import mobx-state-tree-boiler-plate:
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------------
-------- ----- -
------ -
---------------------
--------- -----------
----------------------
-
-这个 GlobalStoreProvider 提供了所有通用的 Store 和 Provider，方便我们使用。
3. 入门教程
接下来，我将给大家介绍一下如何使用 mobx-state-tree-boiler-plate 来构建一个简单的应用。
3.1 建立 Model 和 Store
-- -------------------- ---- -------
------ - ----- - ---- -----------------
----- --------- - -------------
----- -------------
---- -------------
---------- -------------
--
----- --------- - -------------
------ ----------------------
--
------------- -- --
-------- -------------- -
---------------------
-
---首先我们建立了一个 UserModel 和一个 UserStore 。UserModel 定义了一个非常简单的用户模型，包含了姓名、年龄和是否是学生属性。UserStore 定义了存储用户数据的数组 users，同时还有一个 addUser 方法，用于向 users 数组中添加用户。
3.2 引入 Store
上面我们创建了一个 UserStore，但是我们还需要将它注入到我们的组件树中，方便我们在组件中使用。
-- -------------------- ---- -------
------ - -------- - ---- ------------------------------
-------- ------------- -
----- - --------- - - ----------
------ -
-----
--------------
----
------------------------- -- -
--- ----------------
------------------------
-----------------------
--------------------- - --------- - ---- ----------------
-----
---
-----
------
-
-上面我们使用了 useStore 这个 hook，方便我们获取到我们所定义的 UserStore，然后就可以直接在组件中使用了。
3.3 添加用户
-- -------------------- ---- -------
-------- --------- -
----- - --------- - - ----------
----- ------ -------- - ------------
----- ----- ------- - -----------
----- ----------- ------------- - ---------------
----- ------------- - -- -- -
-------------------
-----
----
---------
--
-
------ -
-----
------- ---------
----- -------------------------
-----
--------------------
------ ----------- ------------ ----------- -- ------------------------ --
------
-----
-------------------
------ ------------- ----------- ----------- -- ----------------------- --
------
-----
--------- ----------------
------ --------------- ------------------- ----------- -- ------------------------------- --
------
------- --------------------------
-------
------
-
-上面是一个用于添加用户的表单。当用户提交表单时，我们就可以通过调用 userStore.addUser 方法来添加用户了。
3.4 渲染组件
最后我们需要将上述组件组合在一起进行渲染。
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------------
-------- ----- -
------ -
---------------------
------------ --
-------- --
----------------------
-
-就这样，我们的应用就完成了，可以继续在该模板上开发了，这样可以更高效的完成你日常工作中的任务。
4. 总结
本文简要介绍了 mobx-state-tree-boiler-plate 这个工具的使用，希望能对你有所帮助。在这个简单的应用中，我们了解了如何使用 mobx-state-tree 构建我们的 model 和 store。使用 mobx-state-tree-boiler-plate 可以更大程度上加快我们的开发流程，相比直接使用 mobx-state-tree，我们可以省去很多重复的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab67c2