深入理解React中es6创建组件this的方法


Posted in Javascript onAugust 29, 2016

首发于:https://mingjiezhang.github.io/。

在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的。

从react中的demo说起

Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中。Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类。官方的demo:

class LikeButton extends React.Component {
constructor() {
super();
this.state = {
liked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({liked: !this.state.liked});
}
render() {
const text = this.state.liked ? 'liked' : 'haven\'t liked';
return (
<div onClick={this.handleClick}>
You {text} this. Click to toggle.
</div>
);
}
}
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);

上面的demo中有大量this的使用,在 class LikeButton extends React.Component 中我们是声明该class,因为this具体是由其上下文决定的,因此在类定义中我们无法得知this用法。 相当于是new了上面定义的类,首先调用 constructor() 函数, this.state 的this上下文就是该实例对象;同理,render() 函数中 this.state.liked 的this上下文也是该对象。问题在于 onClick={this.handleClick} ,获取该函数引用是没有问题,这里的this上下文就是该对象。

这时问题来了,在原来 React.createClass 中, handleClick() 在onClick事件触发的时候,会自动绑定到LikeButton实例上,这时候该函数的this的上下文就是该实例。不过在ES6的class的写法中,Facebook取消了自动绑定,实例化LikeButton后,handleClick()的上下文是div的支撑实例( backing instance ),而 handleClick() 原本要绑定的上下文是LikeButton的实例。对于该问题,我们有多种解决方案。

使用bind()函数改变this的上下文

可以在class声明中的constructor()函数中,使用

this.handleClick = this.handleClick.bind(this);

该方法是一个bind()绑定,多次使用。在该方法中,我们在声明该实例后,可以在该实例任何地方使用 handleClick() 函数,并且该 handleClick() 函数的this的上下文都是LikeButton实例对象。

除此我们也可以在具体使用该函数的地方绑定this的上下文到LikeButton实例对象,代码如下

<div onClick={this.handleClick.bind(this)}>
You {text} this. Click to toggle.
</div>

这种方法需要我们每次使用bind()函数绑定到组件对象上。

es6的箭头函数

es6中新加入了箭头函数=>,箭头函数除了方便之外还有而一个特征就是将函数的this绑定到其定义时所在的上下文。这个特征也可以帮助我们解决这个问题。使用如下代码:

<div onClick={() => this.handleClick()}>
You {text} this. Click to toggle.
</div>

这样该 this.handleClick() 的上下文就会被绑定到LikeButton的实例对象上。个人认为,使用箭头函数使得JavaScript更加接近面向对象的编程风格。

this的总结

this的本质就是:this跟作用域无关的,只跟执行上下文有关。

以上所述是小编给大家介绍的React中es6创建组件this的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 #Javascript
关于Javascript回调函数的一个妙用
Aug 29 #Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 #Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 #Javascript
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 #Javascript
Node.js 日志处理模块log4js
Aug 28 #Javascript
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
实现vuex原理的示例
2020/10/21 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python构建网页爬虫原理分析
2017/12/19 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python web框架中实现原生分页
2019/09/08 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
初中科学教学反思
2014/01/21 职场文书
社会公德演讲稿
2014/05/20 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python