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 22 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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实现比较两个字符串日期大小的方法
2015/05/12 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
解析Python中的二进制位运算符
2015/05/13 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python 多维List创建的问题小结
2019/01/18 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
详解python中docx库的安装过程
2019/11/08 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python sublime安装及配置过程详解
2020/06/29 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
大专自我鉴定范文
2013/10/01 职场文书
yy结婚证婚词
2014/01/10 职场文书
代领毕业证委托书
2014/08/02 职场文书
长城英文导游词
2015/01/30 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
《秋思》教学反思
2016/02/23 职场文书