mobx系列(七)- mobx开发调试工具

mobx还提供了一个开发调试工具：mobx-react-devtools，下面简单介绍下mobx-react-devtools的使用。

1、安装

npm install --save-dev mobx-react-devtools

2、使用

要想使用开发调试工具，需要先导入DevTools组件，然后在代码的某个位置渲染它，如：

import React, {Component} from 'react';
import {observer} from 'mobx-react';
import DevTools from 'mobx-react-devtools'
import Todo from '../Todo';
import User from '../User';
import './style.css';

@observer
export default class App extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }

    render(){
        return(
            <div className='app_content'>
                <DevTools />
                <div className='todo_content'>
                    <Todo />
                </div>
                <div className='user_content'>
                    <User />
                </div>
            </div>
        );
    }
}

这种使用方式会使开发工具一直渲染，发布生产时需要删除该工具的渲染；还可以直接进行如下配置，就不需要自己区分开发和生产环境：

{process.env.NODE_ENV !== 'production' ? <DevTools /> : null}

3、开发调试工具

通过以上配置，可以在页面上看到如下组件的显示：

通过鼠标点击选中，选中效果如下：

图中3个工具的功能描述从左到右依次为：

visualize component re-renders（可视化组件重新渲染）
select a component and show its dependency tree（选择一个组件并显示其依赖关系树）
log all mobx state changes and reactions to the browser console（将所有mobx状态更改和响应记录到浏览器控制台）

4、开发工具使用效果

mobx-react-devtools提供的示例为：

实际使用中mobx状态的更改和响应记录表现为：

可以看到，调试工具可以让开发者很详细的看到组件的依赖关系，执行了什么action，该action触发了哪些reaction、computed，哪些组件的re-render以及各操作耗费的时间。