React入口函数 三种模式
首先，react有3种模式进入主体函数的入口
- legacy 模式：
ReactDOM.render(<App />, rootNode)。这是当前 React app 使用的方式。当前没有计划删除本模式，但是这个模式可能不支持这些新功能。 - blocking 模式：
ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在实验中。作为迁移到 concurrent 模式的第一个步骤。 - concurrent 模式：
ReactDOM.createRoot(rootNode).render(<App />)。目前在实验中，未来稳定之后，打算作为 React 的默认开发模式。这个模式开启了所有的新功能。
特性对比
浅谈 useTransition
背景
默认情况下，我们认为React中的所有更新都是紧急的(也就是所有更新的优先级相同)。那会导致一个问题-快速更新会被大量更新拖慢速度; 比如在输入框搜索等场景；
如何解决上面的问题了？ 防抖？节流？
useTransition 就上场了； 将紧急任务的更新和非紧急任务的渲染区分开了，这样的操作提升了用户体验;
例子：在Web应用中，UI更新(比如在输入框中输入字段，从下拉框选择一个值)的优先级应该高一些，而其他操作(比如显示列表过滤内容)优先级要低一些；
实际应用
调用const [isPending, startTransition] = useTransitionHook()返回一个具有两个成员的数组：
isPending: 指明这个transition正在加载中(pending)startTransition(回调): 允许用户将回调中的任何UI更新标记为transitions.
打开这个使用了transitionos特性的示例，如果你非常快速地在输入框中键入，你会注意到高亮列表的延迟更新。
React将紧急任务(当用户键入时更新输入框)的更新和非紧急任务(高亮显示过滤内容)的渲染区分开了，这样的操作提升了用户体验。
类似 debounce 效果
特点： useTransition 实现类似 debounce 效果的秘密就是：高优先级更新中断低优先级更新，使得低优先级更新延迟处理。
类似 throtte 效果
如果你一直输入，最多 5s，长列表必然会渲染，和 防抖 - throtte 效果一样。
这是因为为了防止低优先级更新一直被高优先级更新中断而得不到处理，react 为每种类型的更新定义了最迟必须处理时间 - timeout。如果在 timeout 时间内更新未被处理，那么更新的优先级就会被提升到最高 - ImmediatePriority，优先处理。
transiton 更新的优先级为 NormalPriority，timeout 为 5000ms 即 5s。如果超过 5s， transition 更新还因为一直被高优先级更新中断而没有处理，它的优先级就会被提升为 ImmediatePriority，优先处理。这样就实现了 throttle 的效果。
总结：
-
React18 提供了新的 api - useTransition ，来帮助我们实现更新协调可中断，能极大的提升用户体验；
-
transition 更新可被高优先级更新中断，中断后会被重置为未开始状态；类似于防抖
-
transition 更新被中断后，最迟 5s 必会处理；类似于截流
自己学习笔记
