Profiler

测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。 它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memo 优化的部分，并从相关优化中获益。

单个组件的性能优化

shouldComponentUpdate

shouldComponentUpdate 决定了组件什么时候不需要渲染

对于无状态组件

无状态组件 shouldComponentUpdate 默认返回 true，只要 props 改变就会渲染

react-redux 的 connect 函数

connect 函数实际产生了一个无名的 react 组件类，这个类定制了 shouldComponentUpdate 函数的实现。 react-redux 提供的 shouldComponentUpdate 函数使用浅层比较（===）对比 props 是否发生变化。 所以对于 props 类型为复杂对象，这样的比较总是认为 props 发生了变化。

• 在使用 props 的时候可以使 props 指向同一 JS 对象

// 确保这个初始化只执行一次，不放在render中
const fooStyle = {color: 'red'}
<Foo style={fooStyle} />

<TodoItem
    key={item.id}
    onToggle={onToggleTodo}
/>

• 将组件自己的处理函数内聚到自己的组件内部，减少暴露到外部的 props

多个 react 组件的性能优化

对于原组件根节点的类型发生变化，组件会直接被卸载。对于节点类型未发生改变的情况可分为两类：1.是节点为 DOM 类型，react 会保留节点对应的 DOM 元素，值对比节点的属性和内容，然后更改修改的部分。 2.节点为 react 组件，会经历一系列钩子函数。

• 避免组件根节点类型的变化
• 添加一个唯一的 key

使用 reselect 提高获取性能

优化 mapStateToProps 函数。