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
React事件绑定的几种方式对比的更多相关文章
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路
在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
- Jquery事件绑定的4中方式对比
bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click ...
- js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
- JS事件绑定的三种方式比较
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- 状态管理-vuex
1.使用vuex // 使用vuex // 第一步:装包npm i vuex -S // 第二步: import Vuex from 'vuex' Vue.use(Vuex) // 第三步: cons ...
- java+web+超大文件上传
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...
- GIL与event事件讲解
一.GIL全局解释器锁 global interpreter lock 1.GIL是一个互斥锁:保证数据的安全(以牺牲效率来换取数据的安全),阻止同一个进程内多个线程同时执行(不能并行但是能够实现并发 ...
- SpringMVC学习笔记之---RESTful风格
RESTful风格 (一)什么是RESTful (1)RESTful不是一套标准,只是一套开发方式,构架思想 (2)url更加简洁 (3)有利于不同系统之间的资源共享 (二)概述 RESTful具体来 ...
- 7.Python编码规范(PEP 8)
在讲解具体的 Python 编码规范之前,先来看看图 1 中的代码: 图 1 两段功能相同的 Python 代码 对比图 1 中的两段代码你会发现,它们所包含的代码时完全相同的,但很明显,右侧的代码编 ...
- ElasticSearch的介绍
1.ELK 1.1 集中式日志系统 日志,对于任何系统来说都是及其重要的组成部分.在计算机系统里面,更是如此.但是由于现在的计算机系统大多比较复杂,很多系统都不是在一个地方,甚至都是跨国界的:即使是在 ...
- CodeChef-----February Challenge 2018---Broken Clock(极坐标+三角函数递推+矩阵快速幂)
链接: https://www.codechef.com/FEB18/problems/BROCLK Broken Clock Problem Code: BROCLK Chef has a clo ...
- Mysql 5.7安装与配置-默认密码
Mysql下载 官方下载路径:https://dev.mysql.com/downloads/mysql/ 网盘下载(windows 32-64): 链接:https://pan.baidu.com/ ...
- 数据结构和算法(Java版)快速学习(栈与队列)
栈是仅允许在表尾进行插入和删除操作的线性表.我们把允许插入和删除的一端称为栈顶(top),另一端称为栈底(bottom).栈是一种后进先出(Last In First Out)的线性表,简称(LIFO ...
- QbztDay1游记
qbzt爆零记Day1 T1 我们为什么不把这个机器人直接报废掉呢? 素质题目 其实这就是个膜你模拟 坑点: 如果走到了水池并掉进去了,位置并不是水池前面的格子,而是执行这条指令之前的位置 来自老师的 ...