一、setState
state状态必须通过setState进行更新，且更新是一种合并，不是替换。
下面通过一个切换状态的例子说明
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">// 1.创建组件class Weather extends React.Component {// 构造器调用一次constructor(props) {super(props)this.state = { isHot: false,wind: "微风" }this.switchover = this.switchover.bind(this)}// render调用1+n次render() {const { isHot,wind } = this.statereturn <h1 onClick={this.switchover}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>}// 点几次就调几次switchover() {// 由于changeWeather作为onClick的回调，所以不是通过实例调用的，是直接调用// 类中的方法默认开启了局部的严格模式，所以switchover中的this为undefinedconst isHot = this.state.isHot// 注意：状态必须通过setState进行更新，且更新是一种合并，不是替换this.setState({isHot: !isHot})// 严重注意：状态不可以直接更改，下面这行就是直接更改！！！// this.state.isHot = !isHot}}// 2.渲染虚拟DOM到页面ReactDOM.render(<Weather />, document.getElementById('test'))</script>
</body></html>
1.通过ES6的语法：class类来创建一个类式组件，该类继承自父类React.Component。
2.该类式组件中定义一个构造器，在构造器中必须调用super(props)这方法，且该方法必须是在自定义属性之前调用。
3.在构造器里面定义一个状态state，该state是在父类身上的，子类是通过实例对象沿着原型链获取到父类的state,即this.__props__state,__props__可以省略不写—》this.state。
4一开始state是为null，所以我们开发者可以给state赋值，将状态在页面渲染。
上面的例子中定义了一个state对象，该对象有isHot和wind属性，即this.state = {isHot: false,wind: ‘微风’}，然后在页面中渲染。
然后定义一个切换方法switchover对状态进行改变。
重点：如何修改state？
1）首先在元素中绑定点击事件：在原始html中是使用onclick，而在react中是使用onClick，这里要注意。
2）通过onClick来绑定switchover事件，但在switchover中如何修改？里面的this指向的是谁？
答：由于switchover作为onClick的回调，所以不是通过实例调用的，是直接调用，而在类里面定义的方法，默认是开启了严格模式，所以方法里面的this谁都不指向，为undefined。所以此时switchover里面的this为undefined。
我们要修改state状态，就要拿到state，而state在实例对象上，所以要想办法将switchover里面的this指向实例对象。
3）那么通过bind()方法来改变this的指向，并返回新的函数。
在构造器里面实现this.switchover = this.switchover.bind(this)，此时的this是实例对象，这样就将类中定义的switchover方法里面的this指向实例对象，并定义一个同名的实现来接收，这样onClick绑定的就是构造器定义的switchover。那么状态就可以通过setState进行更新，且更新是一种合并，不是替换。
