react系列-事件绑定的几种方法对比

前言

本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

React事件绑定

由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。

通常如果不是直接调用，应该为方法绑定this。绑定方式有以下几种：

1. 在构造函数中使用bind绑定this

class Button extends React.Component {

constructor(props) {

super(props);

this.handleClick = this.handleClick.bind(this);

}

handleClick(){

console.log(‘this is:‘, this);

}

render() {

return (

<button onClick={this.handleClick}>

Click me

</button>

);

}

2. 在调用的时候使用bind绑定this

class Button extends React.Component {

handleClick(){

console.log(‘this is:‘, this);

}

render() {

return (

<button onClick={this.handleClick.bind(this)}>

Click me

</button>

);

}

3. 在调用的时候使用箭头函数绑定this

class Button extends React.Component {

handleClick(){

console.log(‘this is:‘, this);

}

render() {

return (

<button onClick={()=>this.handleClick()}>

Click me

</button>

);

}

4. 使用属性初始化器语法绑定this(实验性)

class Button extends React.Component {

handleClick=()=>{

console.log(‘this is:‘, this);

}

render() {

return (

<button onClick={this.handleClick}>

Click me

</button>

);

}

比较

方式2和方式3都是在调用的时候再绑定this。

优点：写法比较简单，当组件中没有state的时候就不需要添加类构造函数来绑定this
缺点：每一次调用的时候都会生成一个新的方法实例，因此对性能有影响，并且当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。

方式1在类构造函数中绑定this，调用的时候不需要再绑定

优点：只会生成一个方法实例，并且绑定一次之后如果多次用到这个方法也不需要再绑定。
缺点：即使不用到state，也需要添加类构造函数来绑定this，代码量多一点。。。

方式4：利用属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了this。

优点：创建方法就绑定this，不需要在类构造函数中绑定，调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
缺点：目前仍然是实验性语法，需要用babel转译

总结

方式1是官方推荐的绑定方式，也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4目前属于实验性语法，但是是最好的绑定方式，需要结合bable转译

原文链接：https://segmentfault.com/a/1190000011317515

原文地址：https://www.cnblogs.com/sunlili/p/10113438.html

时间： 2024-10-18 02:11:52

react系列-事件绑定的几种方法对比的相关文章

jQuery事件绑定的四种方法

jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品.该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库. 参数: event:必需

jquery事件绑定的几种用法

常见的事件绑定的几种方法主要有on(),bind(),live(),delegate(),随着版本的不断更新,live(),bind(),delegate()被相继弃用.live():1.7版本之后被弃用bind().delegate():3.0版本之后被弃用虽然在3.0之后的版本中有bind和delegate在,但在具体的实现上还是调用的on() bind: function( types, data, fn ) { return this.on( types, null, data, fn

事件绑定的第二种形式

一.过去,给一个对象绑定一个事件,来处理函数的形式,如obj.onclick=fn1,我们称之为事件绑定的第一种形式(赋值形式). 这种形式的有一种缺点就是:同一个对象的同一个事件不能同时处理两个不同的函数. 例如: function fn1(){ alert("A") } function fn2(){ alert("B") } document.onclick=fn1; document.onclick=fn2;//后面一个事件会覆盖前面一个事件二.为了解决上

[DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

[DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一些特定处理. 监听事件的几种方法如下文. 第一种,写在页面标签里面 <button onclick="alert('Hello')">Say hello</button> 上面这行代码,将按钮点击后的弹窗操作在标签声明的时候就绑定了. 这是一种糟糕的方法,原因如下: 1

简述：js事件代理的7种方法

以为buttton元素绑定单击事件,来探讨事件绑定的几种方式: 1.最原始的方法:在button元素里面添加onclick事件,代码如下: <button onclick=function(){}></button> 这种方法虽然使用简单,但是有一个缺点就是:页面显示和事件处理混在一起,不符合网页开发设计的理念. 2.事件监听(addEventListener) 获取button元素,绑定事件监听 .addEventListener('click',fn,[true/false])

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发.为了应对所遇到的问题,上网查阅了一些资料,对事件绑定做了一些系统研究.##1.事件绑定的几种常见方式(以click事件为例) $(selector).click(function(){...}) $(selector).bind("click",function(){...}) $(selector).live("click",function(){...}) $(document).deleg

事件绑定的几种方式

(一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,下面的代码会弹出div的ID: [html] view plain copy <div id

DropdownList绑定的两种方法

动态绑定方法一:动态绑定数据库中的字段. SqlConnection conn = UtilitySqlClass.OperateDataBase.ReturnConn();string strSQL = "select * from CompanyType";SqlDataAdapter ada = new SqlDataAdapter(strSQL, conn);DataSet ds = new DataSet();ada.Fill(ds, "CompanyType&qu

Android监听点击事件实现的三种方法

监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Context; import android.os.Bundle; import android.os.PersistableBundle; import android.support.design.widget.FloatingActionButton; import android.support