简介
在前端开发中，状态管理是一个非常重要的问题。对于 React 项目，有许多第三方状态管理库，例如 Redux、MobX 等。在 MobX 的官方文档中，有一个推荐的项目 mobx-react-lite，它提供了一些简单易用的 hooks，可以快速实现 React 应用的状态管理。
然而，许多初学者在使用 MobX 过程中，可能会遇到一些困难。例如，需要手动创建 Store 实例、需要将 Store 实例传递给 Provider 等。所以，我们现在要介绍一个方便的 npm 包，它可以帮助我们简化 MobX 在 React 中的使用——with-mobx-store。
安装
使用 npm 安装 with-mobx-store：
npm install with-mobx-store
使用方法
with-mobx-store 是一个高阶组件，可以帮助我们以一种简单的方式使用 MobX。
1. 创建 Store 类
首先，我们需要创建一个 Store 类。这里我们以一个计数器为例：
-- -------------------- ---- -------
-- ---------------
------ - --------------- ----------- ------ - ---- -------
----- ------------ -
----- - --
------------- -
-------------------- -
------ -----------
---------- -------
---------- -------
---
-
----------- -
-------------
-
----------- -
-------------
-
-
------ ------- -------------在上面的代码中，我们创建了一个 CounterStore 类，并且使用了 MobX 的 observe 和 action 装饰器来声明所要监听和使用的状态和方法。
2. 添加 MobXProvider 组件
我们可以使用 MobXProvider 组件来将 Store 传递给我们的应用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ - ---- ------------------
------ ------- ---- ------------
------ ------------ ---- -----------------
----- ------------ - --- ---------------
----------------
------------- ---------------------
-------- --
----------------
-------------------------------
--在上面的代码中，我们创建了一个 CounterStore 的实例，并将其传递给了 MobXProvider 组件。值得注意的是，MobXProvider 的 store 属性应该是一个实例，而不是类。
3. 使用 withMobXStore 高阶组件
现在，我们可以使用 withMobXStore 高阶组件来简化 Store 在组件中的使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ------------------
-------- -------------- -
----- - ----- - - ------
------ -
-----
----------------------
------- ------------------------------------
------- ------------------------------------
------
--
-
------ ------- -----------------------在上面的代码中，我们使用了 withMobXStore 高阶组件来传递 Store 数据到组件中。也就是说，我们不需要在组件的 props 中传递 Store 实例。withMobXStore 已经在内部实现了这一过程。
4. 完整示例代码
下面是一个完整的示例代码，展示了如何使用 with-mobx-store：
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------------- - ---- ------------------
-------- -------------- -
----- - ----- - - ------
------ -
-----
----------------------
------- ------------------------------------
------- ------------------------------------
------
--
-
------ ------- -----------------------
-- ---------------
------ - --------------- ----------- ------ - ---- -------
----- ------------ -
----- - --
------------- -
-------------------- -
------ -----------
---------- -------
---------- -------
---
-
----------- -
-------------
-
----------- -
-------------
-
-
------ ------- -------------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ - ---- ------------------
------ ------- ---- ------------
------ ------------ ---- -----------------
----- ------------ - --- ---------------
----------------
------------- ---------------------
-------- --
----------------
-------------------------------
--结论
通过使用 with-mobx-store，我们可以在不牺牲代码质量的情况下，轻松地使用 MobX 状态管理库，使得 React 应用的开发变得更加轻松和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c0c