react 事件绑定this方式分析；事件传值传值分析

最新推荐文章于 2022-05-31 10:47:46 发布

一只懒羊羊

最新推荐文章于 2022-05-31 10:47:46 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏：前端问题总结文章标签： javascript reactjs es6

原文链接：https://blog.csdn.net/weixin_34227447/article/details/88017936

前端问题总结专栏收录该内容

13 篇文章

订阅专栏

本文探讨了React中三种不同的事件绑定方法及其性能差异，详细分析了箭头函数、构造函数绑定和render内绑定的不同之处。同时，文章还讨论了事件函数传参的多种方式，帮助开发者更好地理解和优化React应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 事件绑定this的三种方式

以下三种方式都能达到同样的效果。
性能排列：
方式二>方式三>方式一
首先，第三种方式性能是最差的，每次在render的时候都要去绑定this。

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

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 <div>
            <button onClick={this.click2}></button>
            <button onClick={this.click3.bind(this)}></button>
        </div>
    }
}

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

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

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

上面是引用大佬的话；
对于初学者来讲。大体知道方式二是性能最优的，方式三是最差的就好了。自己平时写代码注意下；

react 事件传值的分析

我们知道了绑定事件，对于事件传值，我们可以重新考虑下。

<th value={column} onClick={this.handleSort.bind(null, column)}>{column}</th>

<th value={column} onClick={(event) => this.handleSort(column, event)}>{column}</th>
复制代码

总结

this值的绑定首先推荐使用类属性箭头函数的方式来处理，其次是在构造函数中进行绑定。
事件函数传参可以抽离一个子组件或者从DOM属性获取来完成。不考虑性能可能在render函数中进行传参。

参考文章：
https://blog.csdn.net/weixin_34227447/article/details/88017936
https://blog.csdn.net/neoveee/article/details/80638986