ConcurrentMode

ConcurrentMode中间的API有一个过渡的版本后续会提到它其实是

React

的整体渲染过程能够进行一个优先级的排比并且让整体的一个渲染的过程是能够中断的它就可以进行一个任务的调度提升

cpu

如果我们执行更新占用了非常长的时间比如浏览器执行一些动画的渲染中间被进程占用执行其他操作,

时间被拉长动画就变得比较卡顿或者是我们在进行一些input的输入的时候响应会比较的卡因为这个时候

在这种时候React

React更新的过程当中它优先执行优先级高的任务在等浏览器把这些优先级高的任务执行完之后它有空余的时间的时候再来执行优先级较低的任务

实例演示

{clearInterval(this.interval)}}updateNum()

{const

}inputtypecheckboxchecked{async}onChange{()

flushSync(()

classNamewrapper{children}/div/div)}

}export

(enableStableConcurrentModeAPIS)

REACT_CONCURRENT_MODE_TYPE;React.Profiler

REACT_POFILER_TYPE;}

REACT_CONCURRENT_MODE_TYPE;React.unstable_Profiler

flashSync

它会强制我们在执行某一个更新操作的时候使用优先级最高的方式去进行一个更新在

ConcurrentMode

之后它下面的所有的节点产生的更新就是一个低优先级的更新上面的示例把整体渲染都放在这个

ConcurrentMode

每个节点里面的数字是一直在变的在这个过程当中我们又给浏览器增加了一个持续性的动画就是让整体的一个区域左右的移动动画的优先级明显是较高的

主要关注

flashSync因为它是一个优先级较高的任务强制立马更新掉效果就是:

异步模式

{REACT_CONCURRENT_MODE_TYPE,REACT_FRAGMENT_TYPE,REACT_PROFILER_TYPE,REACT_STRICT_MODE_TYPE,REACT_SUSPENSE_TYPE,

from

(enableStableConcurrentModeAPIs)

REACT_CONCURRENT_MODE_TYPE;React.Profiler

REACT_PROFILER_TYPE;

REACT_CONCURRENT_MODE_TYPE;React.unstable_Profiler

REACT_PROFILER_TYPE;

Symbol.for(react.concurrent_mode):

0xeacf;我们自己写组件的时候我们都知道里面会有特别多的一些东西我们要写一些

state