深入理解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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
js实现tab切换效果
2017/02/16 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
python对数组进行反转的方法
2015/05/20 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python地图绘制实操详解
2019/03/04 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
高中语文教学反思
2014/01/16 职场文书
保安2014年终工作总结
2014/12/06 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
MySQL Server层四个日志的实现
2022/03/31 MySQL