深入理解React中es6创建组件this的方法

网络编程 2024/11/15 佚名

3 2 1

首发于：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 "color: #ff0000">使用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的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！