在进行 React 开发的过程中，我们经常会用到 MobX 管理状态，而 mobx-react-devtools 则是针对 MobX 的 Chrome DevTools 扩展， 可以方便地查看、监控、调试状态变化。
在本篇文章中，我们将会介绍 mobx-react-devtools 的使用方法， 包括基本的安装、配置、使用以及进阶用法。
安装
在使用 mobx-react-devtools 前，需要先在项目中安装它。我们可以使用 npm 来进行安装。
npm install mobx-react-devtools --save-dev
配置
在安装完成后，我们可以在代码中导入并使用它：
-- -------------------- ---- -------
------ - ------------ ------------- - ---- --------------
------ -------- ---- ----------------------
-- ------
--------------------
-- ----
----------------
-- -------
----------------
--------- -----------
----------------
--------- --
---- --
-----------------
------------
-------------------------------
--在上面的代码中，我们先导入了 setLogLevel 和 enableLogging 方法用来设置日志相关的配置。接着，我们导入 DevTools 组件，并将其插入到组件树中。这样，在浏览器打开的 React 开发者工具中就可以看到 MobX 相关的调试界面了。
使用
启动项目后，在 Chrome 浏览器中打开 React 开发者工具，可以看到多出了一个 ‘mobx-react’ 的选项。打开这个选项后，就可以看到监控状态的控制台了。可以通过该控制台查看当前的状态变化，以及进行状态流调试。
除了修改配置和使用 MobX 开发工具之外，我们还可以通过组合使用 MobX 的 @observable， @action，@computed等装饰器对状态进行监控。
进阶
除了全局注册的方式外，我们还可以使用 Provider，MobX 的官方推荐方式。
下面是一个使用 Provider 的示例：
-- -------------------- ---- -------
-- -- --- ----- ----------- ----- ---
------ -------- ---- ------------
----- ---- - -------------------------------
----- ------ - --------- --
-------------------------- ------
-- ------------ -
------------------------------------ -- -- -
-- --------- --
-------
---- -------- -------- -------------- ---
--------- --
--------- -----------
---- --
-----------
-------
--
----- --- - -----------------------------------
-------
---- -------- -------- -------------- ---
--------- --
--------- -----------
---- --
-----------
-------
--
---
-在该示例中，我们使用 Provider 组件来向组件树注入 store，依据 mobx-react-devtools 上文所述，在组件树的顶层注入 DevTools 组件，使其可以实时的监听组件树的状态变化。
至此，我们就熟悉了 mobx-react-devtools 的使用方法，可以去实际应用中体验它的强大功能来更好地管理和调试状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73658