react18 新特性

68 阅读1分钟

1.render更加语义化

image.png

2.自动批量更新state(开发模式下关闭严格模式)

promise、setTimeout、原生事件支持(监听click,滚动等),react17会触发两次,react18提升性能合并为一次

这种方式会执行image.png

setTimeout执行image.png

promise执行

image.png

原生事件支持(监听click)执行

image.png

flushSync必须写多个,只写一个,set放在里面还是会执行两次

image.png

3.并发模式

15版本,堆栈diff不可中断同步stack

16版本的fiber(可中断的更新机制),利用的是浏览器的requestIdleCallback,浏览器的碎片化更新机制,看看剩余的事件是不是可以执行

17版本是18版本的实验性,concurrent mode并发模式设计,不是一个功能,只是一个设计

并发模式只是提供可中断的能力,默认情况下是紧急更新

A.startTransition

假如后端每一次搜索请求返回的数据较多(5000条),前端也没有做防抖节流,每一次请求都渲染5000条数据,页面会卡顿,用户体验不好,使用react的api startTransition进行紧急更新标记,标记文本框的处理紧急高于list,最终的效果会有类似节流的效果(次数不可控制),也没有之前那么卡顿 image.png

B.useTransition这是react的hooks,效果跟startTransition一致

image.png