首页 > 其他分享> 文章详细

React的性能优化

2021-05-20 21:03:43 阅读：150 来源： 互联网

标签：render 性能 React state key PureComponent 优化千与千寻

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(){}
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性能进行优化

标签：render,性能,React,state,key,PureComponent,优化,千与千寻
来源： https://www.cnblogs.com/vigourice/p/14705060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React的性能优化