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
参考文档: