深入理解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获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 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 正则表达式小结
2009/08/31 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现读取Properties配置文件的方法
2018/03/29 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python实现文法左递归的消除方法
2020/05/22 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
python SOCKET编程基础入门
2021/02/27 Python
外企测试工程师面试题
2015/02/01 面试题
大气污染防治方案
2014/05/19 职场文书
爱护公物标语
2014/06/24 职场文书
java多态注意项小结
2021/10/16 Java/Android
SQLServer常见数学函数梳理总结
2022/08/05 MySQL