React 学习边角料 细解setState

133 阅读2分钟

使用方式

1.使用的方式

image.png

第一参数
this.setState({})传递 function

image.png

this.setState({})传递 object

image.png

第二个参数 callback
拿到改变之后的结果

2.this.setSate执行原理

为什么要设计成异步?
1.合并:
setState是react的一步操作,每次调用setState都会触发更新,异步操作是为了提高性能,将多个状态合并一起更新,减少re-render调用,
总的来说是为了优化,我们引入了合并的概念
2.state队列:
为了合并setState,我们需要一个队列来保存每次setState的数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。
3.延迟清空
延迟执行清空react里面用的是Promise.resolve,来保证这样在一次“事件循环“中,最多只会执行一次清空了,在这个“事件循环”中,所有的setState都会被合并,并只渲染一次组件。

3.异步还是同步?

可以是同步,也可以是异步
由React控制的事件处理程序,以及生命周期函数调用setState不会同步更新state

image.png

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval

image.png

异步是批量处理异步任务的一种方式
为什么有的时候是 异步 有的时候是同步?合成事件和原生事件为啥有不同?

在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates默认是false,也就表示setState会同步更新this.state,但是,有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state


做个题试一试:

image.png