新的Hooks

渲染慢：如果你有很多没那么着急的内容要渲染更新。

网络慢：如果你的更新需要花较多时间从服务端获取。这个时候也可以再结合Suspense。

useTransition：在使用startTransition更新状态的时候，用户可能想要知道transition的实时情况，这个时候可以使用它。

使用方法：const [isPending, startTransition] = useTransition();

useDeferredValue使得我们可以延迟更新某个不那么重要的部分，相当于参数版的transitions。

新的Hooks

useTransition：如上。

useId：用于产生一个在服务端与Web端都稳定且唯一的ID，也支持加前缀，这个特性多用于支持ssr的环境下。

useSyncExternalStore：此Hook用于外部数据的读取与订阅。

useInsertionEffect：函数签名同useEffect，但是它是在所有DOM变更前同步触发。主要用于css-in-js库，往 DOM中动态注入<style> 或者 SVG <defs>。因为执行时机，因此不可读取refs。

虚拟DOM

什么是虚拟DOM

用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。这个 JavaScript 对象称为虚拟DOM。

DOM操作很慢，轻微的操作都可能导致页面重新排版，非常耗性能。相对于DOM对象，js对象处理起来更快，而且更简单。通过diff算法对比新旧vdom之间的差异，可以批量的、最小化的执行dom操作，从而提升用户体验。

VDom

一个对象，将真实的DOM树转换为JS对象树

< button class = "myButton" >

< span > this is button </ span >

</ button >

//转换

{

type: 'button',

className: 'myButton',

children: [ {

type: 'span',

props:

{

type: 'text'

children: 'this is button'

}

} ]

}

}

将多次DOM修改的结果一次性更新到页面上，有效减少页面渲染次数，减少修改DOM的重排重绘次数，提高渲染性能

优越之处在于，提供更爽的、更高效的研发模式(函数式的UI编程模式)的同时，仍然保持还不错的性能

保证性能下限，不手动优化时，提供过得去的性能跨平台

VDOM生成真实对象render方法

1.构建虚拟 DOM

2.通过虚拟 DOM 构建真正的 DOM

3.生成新的 VDOM

4.比较两棵 VDOM 异同

5.应用变更于 DOM

diff算法

1. ADOM映射为VDOM
2. VDOM变化后，根据差距生成patch，这个patch是结构化数据，包括增加更新和移除
3. 根据patch更新 ADOM

diff 从树组件及元素 3个层面进行复杂度的优化