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


Posted in Javascript onSeptember 24, 2017

前言

本文主要给大家介绍了关于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转译

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

Javascript 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
Javascript 入门基础学习
Mar 10 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
详解React 条件渲染
Jul 08 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 #Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 #Javascript
JS实现手写parseInt的方法示例
Sep 24 #Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 #Javascript
详解Web使用webpack构建前端项目
Sep 23 #Javascript
vue webuploader 文件上传组件开发
Sep 23 #Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
You might like
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php实现算术验证码功能
2018/12/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
JS中的事件委托实例浅析
2018/03/22 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python反转列表的三种方式解析
2019/11/08 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
大学三年的自我评价
2013/12/25 职场文书
面试后的感谢信范文
2014/02/01 职场文书
会计核算科岗位职责
2014/03/19 职场文书
实习生岗位职责
2014/04/12 职场文书
节能减排倡议书
2014/04/15 职场文书
入党综合考察材料
2014/06/02 职场文书
2014年质检员工作总结
2014/11/18 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang