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 加号(+)运算符号
Dec 06 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
js字符串与Unicode编码互相转换
May 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中设置多级目录session的问题
2011/08/08 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php生成动态验证码gif图片
2015/10/19 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python代码调试的几种方法总结
2015/04/15 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Django缓存系统实现过程解析
2019/08/02 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
C++是不是类型安全的
2014/02/18 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
竞选部长演讲稿
2014/04/26 职场文书
电视节目策划方案
2014/05/16 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
python实现语音常用度量方法的代码详解
2021/05/25 Python
Python Pandas常用函数方法总结
2021/06/15 Python
Element实现动态表格的示例代码
2021/08/02 Javascript