状 态
1、工作原理
大部分情况下，实际开发过程中，我们会考虑使用一些管理状态的外部库，如Redux 和 Mobx。导致许多新手上来就去学习使用管理状态的外部库，以致于很多情况下，我们从未真正了解过如何正确使用 React 状态。
在 React 组件的生命周期中，可以使用生命周期中的方法或者时间处理器中的setState多次修改状态。当状态发生变化时，React 就会重新渲染组件视图。
举例来说：
this.state = { name:”Tom” };
//然后用setState
this.setState = { age:18 };
//最终的state
{ name:”Tome”, age: 18 }
所以当state状态改变时，React会自动执行再次渲染的方法，从而影响UI视图的改变。
在一些情况下，需要在更改状态完成之后执行相关操作，这个时候setState的第二个参数，就派上用场了。React为此提供一个回调函数：
this.setState({
age:20,
},()=>{
console.log(“My age is:”,this.state.age);
});
2、异 步
在 React 官方文档中，应该总是总是将setState方法当成异步操作的。举个例子来说：
//点击事件函数
handleClickBtn = () =>{
this.setState({
age:18,
});
console.log(“state is now:”,this.state); //state is now:null
}
render(){
return
}
此时，控制台上将输出：state is now：null
出现这种情况是，React 知道如何优化事件处理器内部的状态更新，同时进行批处理，以获得更好的性能。
如果对代码稍加修改：
//点击事件函数
handleClickBtn = () =>{
//增加延迟
setTimeout(()=>{
this.setState({
age:18,
});
});
console.log("state is now:",this.state); //state is now:object {age:18}}
render(){
return
}
此时控制台上将输出： state is now：object { age：18}
出现这种情况是：React 不知道如何优化执行过程，只能尝试尽快改变状态。
这里使用 setTimeout 只为演示 React 执行行为，尽量避免这样编写事件处理器。