在面试中我们通常会被问到有关 setState
相关的问题。
接下来我们先看几个示例,然后通过 模拟实现 setState
的行为来更加深刻的理解实例得出的结论。
setState 的特点
- 批量执行:多key一次执行,对同一个key多次操作会合并,会执行最后一次
- 可能是异步的(如在生命周期、react合成事件中)
- 在定时器和原生事件中,它是同步的;
由于 setState
可能是异步的,如果要立即获取到最新的值,有三种方式:
- 传函数给setState, 或者在第二个参数回调函数中获取最新值
- 在定时器setTimeout中
- 在原生事件中(跳过了react的事件机制)
咋一看,还是觉得比较绕,结合以上特点,我们来看几个例子
- 多次执行同一个key
class App1 extends React.Component {
state = { count: 1 }
componentDidMount() {
this.setState({ count: this.state.count++ })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 2 })
console.log('count1', this.state.count); // ??1
// 使用定时器
setTimeout(() => {
console.log('count2', this.state.count) // ??2
})
}
handleClick = () => {
this.setState(({ count }) => {
console.log('count3', count) // ?? 3
return { count: count + 1}
})
console.log('count4', this.state.count) //