深入理解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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
Node.js事件驱动
Jun 18 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
浅谈React之状态(State)
Sep 19 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 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
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
python制作一个桌面便签软件
2015/08/09 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
汽车专业求职信
2014/06/05 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js