useState（16 - 18版本对比）

useState的提出是为了在函数式组件之中加入React State

 

对比：

1、useState 与class组件中的setState的不同：

　　useState是对state变量的替换；

　　setState是对state的合并；

 

2、合理使用useState(对比 react16 与 react18)：

　　react16:

　　　　    ｜    

 

 

输出对比：

 

　　　　         ｜        

 

 

 原因：

　　1、react有一个合并更新机制（batchUpdate）,目的是为了减少无效的渲染，节省时间。

　　　　在正常的react事件流里，setState（同步）有批量处理机制（导致感觉像异步），不会立即更新，而是多次setState合并并一次渲染

　　2、Promise.then()、setTimeout等异步事件，不会进入react的合并更新机制，此时每一次setState都会带来一次渲染。

　　3、await只是promise的一个语法糖，await之后的代码都相当于异步的。

 

　　react18

　　　　react  18新特性 中优化了异步函数中的合并渲染：

　　　　                 ｜             

 

 

 　　所以：1、尽量在异步时间前处理setState。2、异步事件中尽可能少setState

 

setState 的底层逻辑参考：

　　React Hooks 源码浅析（二）—— useState

　　

参考文档：

今天让你彻底搞懂setState是同步还是异步

为什么不能直接修改React的State

react  18新特性