react技术全家桶（11）对上次代码的简写以及对state的总结

改造的过程中知识点1：
class Person{
a=1;//这个含义是 给weather的实例对象添加一个属性 名为a 值为1
}

//所以之前的代码： this.state = { isHot: true } 这个就可以从构造语句中干掉了 改为下面的代码
state = { isHot: true }
那么 this.demo = this.demo.bind(this); 这个就可以从构造语句中干掉了 改为下面的代码：
demo = function() {
const isHot = this.state.isHot;
// this.state.isHot = !isHot 直接修改 React不认 要用React的API修改
this.setState({isHot:!isHot});//state是个对象所以不能直接给true或者false
console.log(this.state.isHot)
}
不好意思，报错了，

这个改点击的时候还是把函数赋值给demo了 不是实例调用的。
解决方案：使用箭头函数
demo = () => {
const isHot = this.state.isHot;
// this.state.isHot = !isHot 直接修改 React不认 要用React的API修改
this.setState({isHot:!isHot});//state是个对象所以不能直接给true或者false
console.log(this.state.isHot)
}
箭头函数本身没有this 如果在箭头函数中使用this 会找到箭头函数的外层this作为自己的this 从代码结构提上看外层就是weather 就理解为weather的实例对象吧

构造器的两行代码都被移除来了 所以构造器可以不用写了。

完整代码：

state的总结：
state是组件对象最重要的属性，值是对象，可以包含多个key-vlaue的组合
组件被称为状态机 通过更新组件的state来更新对应的页面显示
组件中render方法中的this为组件实例对象，因为render方法是被React创建的实例对象调用的
组件自定义的方法中this为undefined，如何解决？ 箭头函数 强制绑定this 通过函数对象的bind方法。
状态数据不能直接修改和更新 要使用React提供的API修改。