React 源码关于updateQueue(更新队列)和优先级的解释

React 源码中对更新队列和优先级的解释,适合仔细品。

UpdateQueue

UpdateQueue is a linked list of prioritized updates.(更新队列是一个带有优先级的链表)

Like fibers, update queues come in pairs(源码enqueueUpdate方法 queue1&queue2):
a current queue, which represents the visible state of the screen,
and a work-in-progress queue, which can be mutated and processed asynchronously before it is committed — a form of double buffering(双重缓存). If a work-in-progress render is discarded before finishing,we create a new work-in-progress by cloning the current queue.

Both queues share a persistent, singly-linked list structure. To schedule an
update, we append it to the end of both queues. Each queue maintains a
pointer to first update in the persistent list that hasn’t been processed.
The work-in-progress pointer always has a position equal to or greater than
the current queue, since we always work on that one. The current queue’s
pointer is only updated during the commit phase, when we swap in the
work-in-progress.

// For example:
//
//   Current pointer:           A - B - C - D - E - F
//   Work-in-progress pointer:              D - E - F
//                                          ^
//                                          The work-in-progress queue has
//                                          processed more updates than current.

The reason we append to both queues is because otherwise we might drop
updates without ever processing them. For example, if we only add updates to
the work-in-progress queue, some updates could be lost whenever a work-in
-progress render restarts by cloning from current.

Similarly, if we only add updates to the current queue, the updates will be lost whenever an alreadyin-progress queue commits and swaps with the current queue. However, by adding to both queues, we guarantee that the update will be part of the next work-in-progress. (And because the work-in-progress queue becomes the current queue once it commits, there’s no danger of applying the same update twice.)

Prioritization

Updates are not sorted by priority, but by insertion; new updates are always
appended to the end of the list.

The priority is still important, though. When processing the update queue
during the render phase, only the updates with sufficient priority are
included in the result. If we skip an update because it has insufficient
priority, it remains in the queue to be processed later, during a lower
priority render. Crucially, all updates subsequent to a skipped update also
remain in the queue regardless of their priority. That means high priority
updates are sometimes processed twice, at two separate priorities. We also
keep track of a base state, that represents the state before the first
update in the queue is applied.

For example:
Given a base state of ‘’, and the following queue of updates
A1 - B2 - C1 - D2

where the number indicates the priority, and the update is applied to the
previous state by appending a letter, React will process these updates as
two separate renders, one per distinct priority level:

//   First render, at priority 1:
//     Base state: ''
//     Updates: [A1, C1]
//     Result state: 'AC'
//
//   Second render, at priority 2:
//     Base state: 'A'            <-  The base state does not include C1,
//                                    because B2 was skipped.
//     Updates: [B2, C1, D2]      <-  C1 was rebased on top of B2
//     Result state: 'ABCD'

Because we process updates in insertion order, and rebase high priority
updates when preceding updates are skipped, the final result is deterministic
regardless of priority. Intermediate state may vary according to system
resources, but the final state is always the same.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值