react中的this指向

初入react框架，发了许多关于this的小错，这里总结一下：

首先，不管什么框架，都离不开js语言的限制，只要想清楚这是javaScript就能察觉你的错误是出现那儿的了。

在js语言中，关于this的指向，我总结为3句话：

1. 谁调用的this就指向谁。
2. es6箭头函数指向父层。
3. 大部分你看不出谁调用的都是指向windows的

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      kk:false

    }
  }

  componentDidMount() {
    console.log(this);
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  click2(){
    alert(2);
  }
  click1=()=>{
    alert(1);
    this.click2();
    console.log(this.state.kk);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1 style={{backgroundColor:'red'}} onClick={this.click1}>Hello, world!</h1>
        <h2 ref="h2" id="lala">It is {this.state.date.toLocaleTimeString()}.</h2>
        <A/>
      </div>
    );
  }
}

关注一下上面代码里面的几个this，基本上我项目里的所有情况都能概括了吧。html代码和生命周期函数里的this直接指向react的实例，click1函数的this本身是undefined，所以需要用箭头函数，指向父层，就是这个实例了