Skip to content

理念篇 - React15 架构 的疑问 #102

@iolh

Description

@iolh

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

1635651405(1)

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

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

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions