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转译

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • React学习之事件绑定的几种方法对比

    前言 本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined. 通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构造函数中使用bind绑定this class Button extends React.Component { constructor(props) { su

  • jQuery事件绑定与解除绑定实现方法

    本文实例讲述了jQuery事件绑定与解除绑定实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name=

  • jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: $("form").bind( "submit", function() { return false; } ); 2.通过使用 preventDefault() 方法只取消默认的行为. jQuery 代码: $("form").bind( "submit", function(event){ event.preventDefault(); } );

  • react+django清除浏览器缓存的几种方法小结

    一. meta方法 打包好的入口index.html头部加入 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0&

  • Vue 实现双向绑定的四种方法

    Vue 实现双向绑定的四种方法

    1. v-model 指令 <input v-model="text" /> 上例不过是一个语法糖,展开来是: <input :value="text" @input="e => text = e.target.value" /> 2. .sync 修饰符 <my-dialog :visible.sync="dialogVisible" /> 这也是一个语法糖,剥开来是: <my

  • SpringBoot中@ConfigurationProperties注解实现配置绑定的三种方法

    SpringBoot中@ConfigurationProperties注解实现配置绑定的三种方法

    properties配置文件如下: human.name=Mr.Yu human.age=21 human.gender=male 如何把properties里面的配置绑定到JavaBean里面,以前我们的做法如下: public class PropertiesUtil { public static void getProperties(Person person) throws IOException { Properties properties = new Properties();

  • python读取和保存图片5种方法对比

    python读取和保存图片5种方法对比 python中对象之间的赋值是按引用传递的,如果需要拷贝对象,需要用到标准库中的copy模块 方法一:利用 PIL 中的 Image 函数 这个函数读取出来不是 array 格式,这时候需要用 np.asarray(im) 或者 np.array()函数 . 区别:np.array() 是深拷贝,np.asarray() 是浅拷贝 copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. copy.deepcopy 深拷贝 拷贝对象及其子对象

  • Golang切片删除指定元素的三种方法对比

    目录 前言 1.截取法(修改原切片) 2.拷贝法(不改原切片) 3.移位法(修改原切片) 3.1 方式一 3.2 方式二 4.性能对比 5.小结 前言 Go 并没有提供删除切片元素专用的语法或函数,需要使用切片本身的特性来删除元素. 删除切片指定元素一般有如下几种方法,本文以 []int 为例给出具体实现. 1.截取法(修改原切片) 这里利用对 slice 的截取删除指定元素.注意删除时,后面的元素会前移,所以下标 i 应该左移一位. // DeleteSlice1 删除指定元素. func D

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

随机推荐