深入理解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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
javascript无刷新评论实现方法
May 13 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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利用cookies实现购物车的方法
2014/12/10 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python骚操作之动态定义函数
2019/03/26 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python分数表示方式和写法
2019/06/26 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
高中班长自我鉴定
2013/12/20 职场文书
开办饭店创业计划书
2013/12/28 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
作风年建设汇报材料
2014/08/14 职场文书
教师岗位职责
2015/02/03 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js