深入理解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调用C#代码
Jan 17 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 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实现验证码功能
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
JavaScript修改注册表实例代码
2020/01/05 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
python中实现延时回调普通函数示例代码
2017/09/08 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
保安自我鉴定范文
2013/12/08 职场文书
养殖项目策划书范文
2014/01/13 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
本科生求职信
2014/06/17 职场文书
开服装店计划书
2014/08/15 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
环保宣传语大全
2015/07/13 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
python和anaconda的区别
2022/05/06 Python