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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
javascript的函数作用域
Nov 12 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
Vue常用指令详解分析
Aug 19 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JavaScript Event Loop相关原理解析
Jun 10 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
JS实现骰子3D旋转效果
2019/10/24 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python实现kNN算法
2017/12/20 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Django开发中复选框用法示例
2018/03/20 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python调用Windows命令打印文件
2020/02/07 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
电子商务专业自我鉴定
2013/12/18 职场文书
触电现场处置方案
2014/05/14 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers