New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React v-Dom & diff 算法 #17

Open

JTangming opened this issue Jun 2, 2019 · 1 comment

Owner

JTangming commented Jun 2, 2019

Owner Author

JTangming commented Sep 22, 2019 •

edited

Loading

# React@15
DOM: 真实 DOM 节点
-------
Instances: React 维护的 VDOM tree node
-------
Elements: 描述 UI 长什么样子（type, props）

更新主要分为两个步骤完成：

diff: diff 的实际工作是对比 prevInstance 和 nextInstance 的状态，找出差异及其对应的 VDOM change。diff 本质上是一些计算（递归遍历、比较）。
patch: 将 diff 算法计算出来的差异队列更新到真实的 DOM 节点上。React 并不是计算出一个差异就执行一次 patch，而是计算出全部的差异并放入差异队列后，再一次性的去执行 patch 方法完成真实的DOM更新。

Fiber@16 之前的 reconciler（被称为Stack reconciler）自顶向下的递归mount/update，无法中断（持续占用主线程），这样主线程上的布局、动画等周期性任务以及交互响应就无法立即得到处理，影响体验

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment