React的性能优化

React的更新流程如下，我们可以有两种优化角度
1、props/state变化--->render函数变化这个阶段，减少render的执行次数
2、新旧DOM树进行diff--->计算出差异进行更新，减少差异的内容

react更新机制.png

一、减少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(){}
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进行比较后发现内容不同，这样会增加大量不必要的重新渲染

综上，我们可以通过使用PureComponent、memo以及设置key值来对React性能进行优化