深入理解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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
javascript深入理解js闭包
Jul 03 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JavaScript实现星级评分
Jan 12 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue如何实现动态加载脚本
Feb 05 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
js微信支付实现代码
2016/12/22 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
sklearn+python:线性回归案例
2020/02/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
用python实现学生管理系统
2020/07/24 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
软件项目实施计划书
2014/05/02 职场文书
计算机系本科生求职信
2014/05/31 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技