性能检测工具

我们可以通过一些性能检测工具更加方便地定位性能问题。

React Developer Tools for Chrome

这是一个 Chrome 插件，主要用来检测页面使用的 React 代码是否是生产环境版本。当访问网页时，如果插件图标的背景色是黑色的，就表示当前网页使用的是生产环境版本的 React，如图5-1所示。

Figure 1. 图5-1

如果插件图标的背景色是红色的，就表示当前网页使用的是开发环境版本的 React，如图5-2所示。

Figure 2. 图5-2

Chrome Performance Tab

在开发模式下，可以通过 Chrome 浏览器提供的 Performance 工具观察组件的挂载、更新、卸载过程及各阶段使用的时间。使用方式为：

确保应用运行在开发模式下。
打开 Chrome 开发者工具，切换到 Performance 窗口，单击 Record 按钮开始统计。
在页面上执行需要分析的操作，最好不要超过 20 秒，时间太长会导致 Chrome 卡死。
单击 Stop 按钮结束统计，然后在 User Timing 里查看统计结果。

why-did-you-update

why-did-you-update 会比较组件的 state 和 props 的变化，从而发现组件 render 方法不必要的调用。

# 安装
npm install why-did-you-update --save-dev

# 使用
import React from 'react'

if (process.env.NODE_ENV !== 'production') {
    const {whyDidYouUpdate} = require('why-did-you-update')
    whyDidYouUpdate(React)
}