react中性能优化点有哪些?

react中性能优化点有哪些?下面本篇文章给大家介绍一些react中的性能优化点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

React中的性能优化点

1. 在constructor中绑定事件函数的this指向

把一个函数赋值给一个变量,然后用那个变量去执行函数会造成this的丢失,所以需要绑定this,把绑定放在构造函数中可以保证只绑定一次函数,如果放在render函数中绑定this的话每次渲染都会去绑定一次this,那样是很耗费性能的。

2. 使用箭头函数也就是异步函数的方式写setState

setState它是一个异步函数,他会合并多次修改,降低diff算法的比对频率。这样也会提升性能。

3. 虚拟DOM的使用

用JS对象描述DOM,而不是真的去调用浏览器API生成真实DOM。这样子啊比对前的生成会极大提升性能。

4. 同层比对

新旧状态的比对时采用同层比对,当发现某节点不一致了直接替换该节点的子树。而不管它的子树是不是真的改动了。

5. key值的使用

在列表循环的时候React会要求每一个列表项有一个独一无二,稳定的key值,它的目的是为了当状态改变时新旧状态的每一个列表项能够对应起来,方便比对。

6. shouldComponentUpdate

当父组件被重新渲染时即render函数执行时,子组件就会默认被重新渲染,但很多时候是不需要重新渲染每一个子组件的。这时就可以使用 shouldComponentUpdate 来判断是否真的需要重新渲染子组件。仅仅一个判断,就可以节约很多的消耗。

所以对于父组件发生变化而子组件不变的情况,使用shouldComponentUpdate会提升性能。

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content === this.props.content) {
        return false;
    } else {
        return true;
    }
}

更多web开发知识,请查阅 HTML中文网 !!

以上就是react中性能优化点有哪些?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    记一次服务端系统性能优化

    记一次服务端系统性能优化,在线,设备, 首先简单介绍一下业务场景,物联网设备,关注公众号,免费领取环保袋。12月8号,也就是昨天上午,突然接

    Win8与ARP攻击的电脑的MAC地址绑定

    Win8与ARP攻击的电脑的MAC地址绑定,,评论:有时用户会使用P2P软件通过ARP攻击其他计算机,以降低其他用户的速度。尽管Win8有没有好的应对策略