React的更新流程如下，咱们能够有两种优化角度
1、props/state变动--->render函数变动这个阶段，缩小render的执行次数
2、新旧DOM树进行diff--->计算出差别进行更新，缩小差别的内容
一、缩小render的执行次数
1、类式组件
(1) shouldComponentUpdate
当props或者state更新时，render函数就会从新执行，此时咱们能够通过生命周期 shouldComponentUpdate来管制是否须要render从新执行，当不写这个生命周期时，React外部决定render是否变动的函数就会返回true，即默认每次都更新。
state = { count: 0 }shouldComponentUpdate(nextProps, nextState){ if(nextProps.count === this.state.count){ return false } return true } (2) PureComponent
本人去监控每一个state或者props会有比拟大的工作量，这时候能够使组件继承自PureComponent，PureComponent外部重写了shouldComponentUpdate这个生命周期办法，它对state和props进行了一个浅比拟
export default class Count extends React.PureComponent {}2、函数式组件
应用memo高阶组件，也是将数据进行了一个浅比拟
function myComponent(){ return(<div>Hello</div>)}export default React.memo(myComponent)二、缩小差别
虚构DOM的diff算法中为了进步性能，只对每一层进行比拟，不会跨层比拟，有key的时候会比对雷同的key，没有key时内容不同就间接替换，当咱们进行逆序减少数据时，没有惟一的key，会导致雷同的数据每次都会从新渲染
<ul> <li>千与千寻的神隐</li> <li>龙猫</li> <li>侧耳聆听</li><ul><ul> <li>起风了</li> <li>千与千寻的神隐</li> <li>龙猫</li> <li>侧耳聆听</li><ul>实际上这组数据只新增了一个内容，然而没有key的话，会同级之间比拟，发现每一层都不雷同，所以都会从新渲染成新的DOM节点。
key的设置也须要留神，不要用索引值，要用每个元素的惟一id，因为索引值会依据遍历的数据变动，就产生以下状况
<ul> <li key="1">千与千寻的神隐</li> <li key="2">龙猫</li> <li key="3">侧耳聆听</li><ul><ul> <li key="1">起风了</li> <li key="2">千与千寻的神隐</li> <li key="3">龙猫</li> <li key="4">侧耳聆听</li><ul>这样实际上即便定义了key，当数据更新时，同一个值会有不同的key，进行比拟时，找到同样的key进行比拟后发现内容不同，这样会减少大量不必要的从新渲染
综上，咱们能够通过缩小render的更新以及设置key值来对React性能进行优化