深入理解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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JavaScript数据类型详解
Apr 01 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
js实现蒙版效果
Jan 11 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JS实现烟花爆炸效果
Mar 10 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python中的异常处理学习笔记
2015/01/28 Python
python插入数据到列表的方法
2015/04/30 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Django中Forms的使用代码解析
2018/02/10 Python
python面试题之列表声明实例分析
2019/07/08 Python
Django  ORM 练习题及答案
2019/07/19 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
技校毕业生个人学习的自我评价
2014/02/21 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python