渲染策略-篇章-1

渲染策略顾名思义是渲染的方式，那在JavaScript中，无非就两种方式，同步渲染或者异步渲染。目前React库的最新版本，使用的是异步渲染的方式（>=18），而在以往的历史版本（<=17.2），使用的是同步渲染。在启动方式上也不同。异步渲染方式也被称为concurrent模式，需要先执行ReactDom.createRoot函数，才执行函数返回值上的render函数，并且render函数也不再需要第二个参数callback。
以下几种是React目前和以往使用过的启动方式：
legacy模式：是React早期使用的渲染模式。在这个模式下，React的渲染过程是同步执行的，一旦开始，中途就无法中断，这就意味在渲染期间，JavaScript线程会被长期占用，无法对其他的更优先的事件做出反应，并且如果渲染任务比较耗时，可能会导致页面失帧。legacy模式启动方式ReactDom.render(Element, Component)，不过目前在最新的版本中还对外暴露这个方法。
blocking模式：这是从legacy模式过渡到concurrent模式的方案，不过目前的最新的版本中已经不存在这个模式（可以不用做了解）。
concurrent模式：目前版本使用的渲染模式，在这个渲染模式下，引入了任务优先级，赛道Lans，任务合并，中断，重启，等概念，例如，点击事件的优先级高于输入事件的优先级，事件的优先级又对应着相应的赛道。如果出现两个相同等级的任务，其中一个任务正在执行，那另外一个任务就被合并到上一任务的赛道。又或者优先级比较高的任务打断了低优先级的任务，当高优先级的任务结束了就要重启低优先级的任务，甚至有高优先级的任务一直打断低优先级的任务，低优先级过时重启。concurrent模式启动方式ReactDom.createRoot(root as HTMl).render( Component)，render函数的第二个参数已经省略。