理念篇 - React15 架构 的疑问

[iolh]

卡子哥，我知道你想表达的是旧架构栈调和 无法实现“可中断异步更新”，但是关于" Reconciler和Renderer是交替工作的，当第一个li在页面上已经变化后，第二个li再进入Reconciler " 这一句话的表述是否存在问题呢？

以上来自 陈屹的《深入 React 技术栈》，针对的是 React15。

以上是官方文档对旧架构栈调和的实现说明：https://zh-hans.reactjs.org/docs/implementation-notes.html。

综上所述，我的理解是：Reconciler和Renderer是交替工作的，但是在一次更新中 协调器Reconciler 工作结束后才是渲染器 Render 工作，当渲染器处理 第一个li在页面上的变化，紧接着就会处理第二个li在页面上的变化，如果这时候中途中断更新会看见不完整的变化，但实际上旧架构 Reconciler 和 Render 一起工作，并且各自是不可中断的，是一个长任务，导致帧的 Layout / Paint 缺失，也就是掉帧，给用户的体验就是卡顿，新架构启用 fiber，使得Reconciler工作异步可中断，长任务分割为短任务，保证页面渲染不掉帧，Render 同步工作，保证页面变化完整性。

不知道有什么错误的地方，希望卡子哥指点下~

[AllenHu000]

有同样的困惑。
既然React15并不会中断更新，那上图模拟的“中途中断更新”这种情况并不会出现啊，怎么会造成123变223呢？

[ben-Run]

有同样的困惑