React18 有哪些新变化?
react18以于2022年3月29日发布正式版本。
- Concurrent Mode(以下简称 CM)翻译叫并发渲染机制:在以前,React 在状态变更后,会开始准备虚拟 DOM,然后渲染真实 DOM,整个流程是串行的。一旦开始触发更新,只能等流程完全结束,期间是无法中断的。 在 CM 模式下,React 在执行过程中,每执行一个 Fiber,都会看看有没有更高优先级的更新,如果有,则当前低优先级的的更新会被暂停,待高优先级任务执行完之后,再继续执行或重新执行。
- startTransition:主动降低优先级。本质上是用于一些不是很急迫的更新上,用来进行并发控制,在v18之前,所有的更新任务都被视为急迫的任务,而CM模式能将渲染中断,可以让高优先级的任务先更新渲染。 比如「搜索引擎的关键词联想」,用户在输入框中的输入希望是实时的,而联想词汇则不是很在意。我们可以用 startTransition 来降低联想词汇更新的优先级。
- 入口优化:现在是要先通过createRoot()创建一个 root 节点,然后该 root 节点来调用render()方法;后面再想重新渲染整个应用的时候,通过root节点进行render,就不用重新渲染这个根结点了。
- 全部自动批处理优化:批处理是 React 将多个状态更新分组到一个重新渲染中以获得更好的性能。(例如将多次 setstate 事件合并); 在v17的批处理只会在事件处理函数中实现,在 v18 中所有更新都将自动批处理,包括 promise 链、setTimeout 等异步代码。
- useId:主要用于 SSR 服务端渲染的场景,方便在服务端渲染和客户端渲染时,产生唯一的 id;