深入理解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 - 如何引入js代码
Mar 09 Javascript
pjblog中的UBBCode.js
Apr 25 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
vue-router传参用法详解
Jan 19 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
基于vue hash模式微信分享#号的解决
Sep 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 实现页面静态化的几种方法
2017/07/23 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
python编程实现归并排序
2017/04/14 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
测绘工程本科生求职信
2013/10/10 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
公司财务自我评价分享
2013/12/17 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL