重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

React中this绑定的方法

本篇内容介绍了“React中this绑定的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

10年积累的网站制作、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有润州免费网站建设让你可以放心的选择与我们合作。

我们在react项目开发时,通常会遇到this 绑定的问题。解决的方法总结下分为下面的三种情况:

import React from 'react'export default class Demo extends React.Component{
    constructor(props){        super(props);        this.click1.bind(this)//方式1: 在构造函数内绑定
    }
    click1(){
    }
    click2=()=>{//方式2: 使用箭头函数
    }
    click3(){
    }
    render(){        //方式3: 在render内绑定
        return 

                                  

    } }

三种方式都能达到同样的效果,但是性能上还是有很大的差别的。

首先,第三种方式性能是最差的,每次在render的时候都要去绑定this

对于第二种和第三种,我们这样看其实看不出差别,但是如果我们将代码编译为ES5 之后,就能看到其中的区别了:

React中this绑定的方法

首先,使用箭头函数的方式,该方式其实是定义在this 上的,也就是说,在每一个实例化之后的this 都会定义该方法,但是通过方式1,该方式其实是定义在prototype 上的,各个实例对象共享该方法。所以,单纯从内存空间的消耗上来看,方式1其实是最好的。

但是定义在原型链上的方法,在实际调用该方法的时候,其查找的过程是这样的:
首先检查this 上是否有该方法的定义,如果没有的话,则去prototype 上查找是否有该方法,所以在方法调用的过程中,会经历一次跨原型链的查找。该过程是方法1带来的额外的消耗。

但是箭头函数的方式,在实际调用的时候,访问的是外层作用缓存的_this,  所以在作用域查找上有一层消耗。

经过私底下的测试发现,在原型链上的查找比作用域上的查找,性能会好很多。所以综合来看,还是第二种的方式是最优的。

另外,看老外的代码中,发现过一个批量绑定的方式,其实是对方案一的一种优化,可以简单借鉴一下:
React中this绑定的方法

React中this绑定的方法

“React中this绑定的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网页标题:React中this绑定的方法
分享地址:http://cqcxhl.cn/article/pjsdcc.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP