前端开发React

React中ES6方法创建组件的this

JavaScript, React

学习React的时候，一直为this所困扰，今天就来好好的整理一下，先看一个官方的demo :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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')
);

重点看第8行和第16行，在 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的实例。因此要用到第8行的使用bind()函数改变this的上下文## 使用bind()函数改变this的上下文

总结起来就是：ES6方法创造的React组件并不自动为我们绑定this到当前的实例对象，第8行代码的作用就是通过bind方法让当前的实例中handleClick函数被调用时，this始终是指向当前组件实例。

对于出现的这个问题，我们有两种解决方法

使用bind()函数改变this的上下文

  • 可以在class声明中的constructor()函数中，使用this.handleClick = this.handleClick.bind(this)
    也就是我们开头提到的方法

  • 除此我们也可以在具体使用该函数的地方绑定this的上下文到LikeButton实例对象，代码如下

1
2
3
<div onClick={this.handleClick.bind(this)}>
  You {text} this. Click to toggle.
</div>

这种方法需要我们每次使用bind()函数绑定到组件对象上。

es6的箭头函数

es6中新加入了箭头函数=>，箭头函数除了方便之外还有而一个特征就是将函数的this绑定到其定义时所在的上下文。这个特征也可以帮助我们解决这个问题。使用如下代码：

1
2
3
<div onClick={() => this.handleClick()}>
  You {text} this. Click to toggle.
</div>
分享到