React: 深入类中this对象的理解

简单组件&复杂组件定义

如果这个组件包含state状态，则为复杂组件，反之则为简单组件。

有状态组件的基础语法：

放在构造函数constructor里面，加一个状态state属性。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

关于this指向理解

其实，在函数式组件里面，this也是undefined。在class类中的render函数中this是指向的是组件实例。在类外面定义的函数，this指向的是undefined。

问题：class类中这样定义方法的时候，方法中的this指向什么？---答案是undefined

为什么？因为抛开react的所有概念，在ES6中的类中定义方法的时候，如果这个方法是通过实例调用，此时方法中的this指向这个类的实例对象，否则则为undefined,同时类中的方法也是定义在类的原型对象上，且开启了局部的严格模式（use strict）

 再举个普通的类的例子来进一步了解这个this的指向，如下图：

React如何解决类中定义直接定义方法的this指向问题？

首先明确一个概念：构造器中的this本身就是指向实例对象的。通过bind函数绑定了this,然后返回一个新的函数changeWeather，将这个新的函数作为一个值，赋值到了实例对象中的changeWeather属性中。