关于React 16版本前Stack Reconciler实现中Diff算法执行时机的疑问

Great question! Even though Fiber has been the standard for years now, digging into the old stack reconciler is a great way to appreciate why React needed a rewrite. Let’s clear up your confusion step by step.

First off, your core intuition is mostly correct—the diffing process does happen during the recursive backtracking phase of the reconciler. Let’s break down exactly how this played out when a component’s state updated:

When a component’s state changed, React would kick off a synchronous, depth-first recursive traversal starting at that component:

1. It would first call the updated component’s render() method to generate a new VDOM node for it.
2. Then it would recursively do the same for every child component, working its way down until it hit leaf nodes (like plain <div> or text nodes).

Here’s where your intuition lines up perfectly: once React reached the bottom of the tree (the leaf nodes), it would start backtracking up the component hierarchy. During this backtracking phase, it would perform the diffing for each component level:

• For each component, it would compare the newly generated VDOM node against the cached old VDOM node from the previous render.
• It would apply the heuristic diff rules you mentioned (like same component types get props compared, keys for list items, etc.) to figure out what changes needed to be made to the real DOM.
• Crucially, in the stack reconciler, these DOM updates happened immediately as it backtracked—as soon as it diffed a component’s VDOM, it would sync the changes to the browser DOM right then and there.

To address your specific point: "till we don't get the jsx returned by the ChildComponent, we can't really compare if the parent component changed right??" You’re partially right—the parent’s VDOM includes references to its child components, but the full child VDOM isn’t generated until we recurse into the child. However, the parent’s own diff (like checking if its own props or type changed) can start once we have its new VDOM, but the parent’s child list diff (like checking if children were added/removed/reordered) does wait until we have the child VDOMs. That said, the actual diff and update for the parent happens during the backtracking step, after all its children have been processed.

The key thing to note is that this entire process was uninterruptible—once React started the recursive render/diff/update cycle, it had to run all the way to completion. If the component tree was large, this could block the main thread for long enough to cause jank, which is exactly why Fiber (with its interruptible, priority-based scheduling) was built to replace it.

内容来源于stack exchange