乐趣区

关于javascript:React的性能优化

jiezi

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 性能进行优化

退出移动版