性能工具

chrome 的 devtool：React Perf

单个组件的性能优化

shoudComponentUpdate()

多个组件的性能优化

调和(Reconciliation)：对比原有 VDOM 和新生成的 VDOM，找出不同的过程

对比两个N个节点的树形结构的算法事件复杂度是O(N)，
React 的调和算法是性能和复杂度最好的折衷，

• 从根节点开始递归往下比对，
• 比较同一棵树
• 判断类型。类型不同则不再递归比较
• React 组件判断 shouldComponentUpdate 的值
• 通过 key 来识别多个子组件的位置，从而避免无谓的更新

按需加载

第三方库：react-loadable：https://github.com/jamiebuilds/react-loadable/blob/master/README.md
环境配置：

• 修改 .babelrc 文件：在 plugins 中添加 "syntax-dynamic-import"

yarn add babel-plugin-syntax-dynamic-import -dev

import React from 'react';
import Loadable from 'react-loadable';
import { Route, Switch } from 'react-router-dom';
const Home = Loadable({
  loader: () => import('../Home'),
  loading: Loading,
  timeout: 10000
});
const EditArticle = Loadable({
  loader: () => import('../EditArticle'),
  loading: Loading,
  timeout: 10000
});
// ...
<Switch>
    <Route exact path="/home" component={Home} />
    <Route path="/editarticle" component={EditArticle} />
</Switch>

用 reselect 提高数据获取性能

原理：只要相关状态没有改变，就直接使用上一次的缓存结果