2.1 组件1 state属性知识点:setState是同步还是异步?

我的回答:

一 。setState是同步执行的,但是state并不一定会同步更新。

二。 setState在不同模式下,效果是不同的。

1如果是在concurrent模式下都是异步的。 reactDOM.createRoot

2如果是在legacy模式下, 

三。this.state 是根据 isBatchingUpdate(values)的值,确定是否批处理更新。( isBatchingUpdates:是否批处理更新: 默认值是flase,默认是同步的。)

四。合成事件,或者钩子函数中(onClick,componnetDidMount),会调用batchedUpdatestae(),把isUpdates值变tue,放在队列里面,批量更新。

在原生事件中使用,或者setTimeout(异步执行) 。里面使用 。false保持不变,立即执行同步更新。

为什么需要批处理?因为(1 提高性能。 2 父组件穿props属性和state不一致)

参考视频:https://www.bilibili.com/video/BV1df4y1C7P9

https://www.bilibili.com/video/BV1uh411177Q?from=search&seid=519735711874763743

参考博客:https://blog.csdn.net/zrq1210/article/details/103781692?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=413028cf-a3fd-4056-ba51-6167fc67dd5e&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

 https://blog.csdn.net/ddh3110/article/details/102204429?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=40b940b3-cb9d-4a86-84e9-45c4d6b6fc88&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

1 完全不需要 依赖这个 特性。如果需要更新后的值,

class component componentDIdmount, componentDIdupdate

function componet ,useEffect的回调函数中执行。

2 不同模式下 react的效果不同。

3中模式:

legac y模式(le ga cy 遗产,遗物): react DOM。render . 0  0 .触发 的是异步的。批处理,context !=  异步,同步。

  batchedUpdate是异步的,没有命中batchedUpdate就是i同步的,

  放在setTimeout里面的执行的是,同步。

concurrent模式: reactdom.createRoot 。都是异步。(blocking模式: reatDOM .createBlockingRoot(0 (concure模式的第一步))

lagacy模式下,我们讨论为什么设定为异步更新?

为什么设定的是异步的呢?

原因1 

this.setState是 异步的,batchedUpdates批处理。

事件,事件里面,只会出发一次render,提高react的性能。

state立刻改变,render会慢一点,diff算法。

原因2 : 

props是:hello world。父元组给子元组传递值,props和state不能保持一致。

拿到最新的数据。this.state.message。

如何同步获取state?

方式1 :获取一处更新的数据。回调。

  (要更新的数据,callback)

传入一个回调函数。(类似于vue nextTick)

方法2 : componentDidIUpdate()

也可以拿去。(获取异步更新的方式)

consoel.log(this.state.message)

两种情况是同步更新的:

1 在setTimeout中更新:

将setState放入定时器中!

1 setTime(()=>{

},0)

2  原生DOM事件:

原文地址:https://www.cnblogs.com/hacker-caomei/p/14436486.html