setState有两种书写方式
- setState(updater, [callback])：
updater为返回stateChange对象的函数: (state, props) => stateChange。接收的state和props被保证为最新的
this.setState((state)=>({
count: state.count + 1
}),()=>{
console.log(this.state.count)
})
- setState(stateChange, [callback])：
stateChange为对象，对象方式是函数方式的简写方式
this.setState({
count: 0
})
callback是可选的回调函数, 在状态更新且界面更新后才执行。
什么时候用哪种方式?
如果新状态不依赖于原状态，使用对象方式
如果新状态依赖于原状态，使用函数方式
如果需要在setState()后获取最新的状态数据, 在callback函数中读取
setState更新方式
根据执行setState的位置不同，可以分为异步or同步更新
在react控制的回调函数中(生命周期勾子 / react事件监听回调)，异步更新。即在同一个方法中执行多次setState，只调用一次render()更新界面。
在非react控制的异步回调函数中( 定时器回调 / 原生事件监听回调 / promise回调 /...)，同步更新。即每执行一次setState，调用一次render()更新界面。异步更新时，使用不同的setState书写方式，React是的处理方式也是不同的
首先，前面说过异步更新时只调用一次render()更新界面，即界面更新合并了。不同的是：
setState({}): 在同一方法中不管使用多少次，都合并更新一次状态。也就是状态更新也合并了。
setState(fn): 在同一方法中使用多少次更新多少次状态。状态更新没有合并。
为什么会这样？
setState(fn)可以把上次更新后的状态拿来作为参数使用，所有setState(fn)的状态更新不会合并
class StateTest extends React.Component {
state = {
count: 0,
};
componentDidMount() {
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// 这两条合并成了一条，相当于
// this.setState({
// count: this.state.count + 1,
// count: this.state.count + 1,
// });
console.log('[1]', this.state.count); // 2 ==> 0
this.setState((state) => ({ count: state.count + 1 }));
this.setState((state) => ({ count: state.count + 1 }));
console.log('[2]', this.state.count); // 3 ==> 0
setTimeout(() => {
this.setState({ count: this.state.count + 1 });
console.log('timeout', this.state.count); // 10 ==> 6
this.setState({ count: this.state.count + 1 });
console.log('timeout', this.state.count); // 12 ==> 7
}, 0);
Promise.resolve().then((value) => {
this.setState({ count: this.state.count + 1 });
console.log('promise', this.state.count); // 6 ==>4
this.setState({ count: this.state.count + 1 });
console.log('promise', this.state.count); // 8 ==> 5
});
}
render() {
const count = this.state.count;
console.log('render', count); // 1 ==> 0 4 ==>3 5 ==>4 7 ==>5 9 ==>6 11 ==>7
return (
<div>
<p>{count}</p>
</div>
);
}
}
