递归更新的缺点

由于递归执行,所以更新一旦开始,中途就无法终端。当层级很深时,递归更新时间超过了16ms,用户交互就会卡顿。

React16的架构在15的基础上增加了Scheduler

Scheduler负责调度任务的优先级,高优任务优先进入Reconciler

在React16中Reconciler更新工作从递归变成了可以中断的循环过程。每次循环都会调用shouldYield来判断当前是否还有剩余时间

而为了解决中断更新带来的DOM渲染不完全问题,Reconciler和Renderer不再是交替工作。当Scheduler将任务交给Reconciler之后,Reconciler会为变化的虚拟DOM打上代表增/删/更新等标记。整个Scheduler和Reconciler的工作都在内存中进行。只有当所有组件都完成Reconciler的工作,才会统一交给Renderer。

其实浏览器原生就支持类似的实现,就是Generator。但是Generator的缺陷是具有传染性,使用了Generator则上下文的其他函数也需要做出改变。心智负担比较重。

而且Generator执行的中间状态是上下文关联的,当高优先级任务插队的时候,无法复用之前已经执行出的结果。需要重新计算。如果通过全局变量保存之前的执行结果,又会引入新的复杂度。

在React中JSX最终会变编译成React.createElement的显式调用,所以这也是为什么每个JSX的js文件中必须要显式声明React

reactjs
44 views
Comments
登录后评论
Sign In