react中类组件的定义函数

开发中需要的状态我们会把他放在state中，我们也会定义一些函数来通过改变这些state从而改变页面的一些展示。这些函数一般都会放在类中定义，毕竟放在类的外面是肯定获得不到类中的state的。
注： 类中的函数是默认开启严格模式的

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isHot: true};
  }
  render() {
    const { isHot } = this.state;
    return <h1 onClick={this.changeWeather}>今天天气非常的{isHot ? '炎热' : '凉爽'}</h1>
  }
  changeWeather() {
    console.log(this);
  }
}
ReactDOM.render(<Weather />, document.getElementById('app'));

这个地方需要看的是，首先我们把state是写在构造函数中，其次当我们给标签添加click属性的时候，和原有的属性不同，原来的是onclick并且其中的值是用引号括起来的一个函数的执行状态，意思也毕竟容易理解，但是react在这个基础上将其点击的属性修改为了onClick，并且赋值的时候用{}来进行接取值，并且函数并不是一个执行状态。
现在结果如下

但是我们点击的时候发现输出的this是undefined，我们希望的是可以拿到对象实例，这样来修改state中的值，但是为什么是undefined呢？
原因如下：首先我们赋值的时候是直接把这个函数赋值给了onClick这个属性，那么什么情况下这个函数中的this是Weather{...}呢？当然是 对象实例.changeWeather()的时候，那我们现在里面的赋值是this.changeWeather呀？这个this难道不是实例对象吗？这里的this是实例对象，但是这个函数的执行是这样的，当我们点击的时候，其真正的情形是 changeWeather(),注意，不是对象实例.changeWeather()，为什么？首先this.changeWeather确实是找到了这个对象中的changeWeather方法，但是也只是找到了这个方法而已，说的直白点就是this.changeWeather把这个方法赋值给了onClick这个属性，但是在执行的时候就是单纯的调用这个方法，并没有其他的this来指代实例，那看着也不对呀？那样的话为什么输出不是window呢？这个就是开头特别说的那一句：类中的方法默认局部是严格模式，所以就是undefined，ok，那么现在该如何解决这个问题呢？
所以当前的问题就是this指向不够明确，那我们就让它明确明确，给他绑this！

现在就ok了

那么接下来是不是就可以去修改state了呢？毕竟都已经拿到了实例的this，正常情况下的修改都会这样做，在changeWeather方法中this.state.isHot = !this.state.isHot，但是这样可以吗？ 首先确认的是我们state中的isHot值确实是修改了，但是页面并没有发生渲染，因为react不认这种对于state的修改，人家本身提供了一个修改的方法，叫做setState(),这个方法存在与React.Component的原型的原型对象上。
所以我们要修改，就是this.setState({isHot: !this.state.isHot})。
达到了我们需要的效果，最后补充就是setState的对象是在原有的基础上进行替换，不是覆盖。