深入理解React中es6创建组件this的方法
首发于:https://mingjiezhang.github.io/。
在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的。
从react中的demo说起
Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中。Facebook也推荐组件创建使用通过定义一个继承自React.Component的class来定义一个组件类。官方的demo:
classLikeButtonextendsReact.Component{ constructor(){ super(); this.state={ liked:false }; this.handleClick=this.handleClick.bind(this); } handleClick(){ this.setState({liked:!this.state.liked}); } render(){ consttext=this.state.liked?'liked':'haven\'tliked'; return( <divonClick={this.handleClick}> You{text}this.Clicktotoggle. </div> ); } } ReactDOM.render( <LikeButton/>, document.getElementById('example') );
上面的demo中有大量this的使用,在classLikeButtonextendsReact.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的支撑实例(backinginstance),而handleClick()原本要绑定的上下文是LikeButton的实例。对于该问题,我们有多种解决方案。
使用bind()函数改变this的上下文
可以在class声明中的constructor()函数中,使用
this.handleClick=this.handleClick.bind(this);
该方法是一个bind()绑定,多次使用。在该方法中,我们在声明该实例后,可以在该实例任何地方使用handleClick()函数,并且该handleClick()函数的this的上下文都是LikeButton实例对象。
除此我们也可以在具体使用该函数的地方绑定this的上下文到LikeButton实例对象,代码如下
<divonClick={this.handleClick.bind(this)}> You{text}this.Clicktotoggle. </div>
这种方法需要我们每次使用bind()函数绑定到组件对象上。
es6的箭头函数
es6中新加入了箭头函数=>,箭头函数除了方便之外还有而一个特征就是将函数的this绑定到其定义时所在的上下文。这个特征也可以帮助我们解决这个问题。使用如下代码:
<divonClick={()=>this.handleClick()}> You{text}this.Clicktotoggle. </div>
这样该this.handleClick()的上下文就会被绑定到LikeButton的实例对象上。个人认为,使用箭头函数使得JavaScript更加接近面向对象的编程风格。
this的总结
this的本质就是:this跟作用域无关的,只跟执行上下文有关。
以上所述是小编给大家介绍的React中es6创建组件this的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!