[Whole Web] Vue design and React design

Virtual DOM Advantage:

One of the advantages of the virtual DOM is cross-platform rendering abstraction. The virtual DOM can connect to different host environments, enabling one framework to render across multiple platforms.

1. Why did React switch from the Stack architecture to the Fiber architecture?

To understand this question, we need to clarify the differences between the designs of Vue and React.

• Is React reactive? Is Vue reactive?
  • React is not reactive, whereas Vue is reactive.
  • This means in React, when a state changes, React doesn’t inherently know what changed. It needs to use a diff algorithm to figure it out. On the other hand, Vue is reactive, meaning it knows exactly what data changed as soon as it happens.

This fundamental design difference led to significant divergence in the development of these two frameworks.

• React's problem: React’s design requires recalculating the entire virtual DOM tree. This computation occurs in the JavaScript layer and, while fast, becomes time-consuming if the virtual DOM tree is large. This creates a problem where React can block the browser from rendering the next frame because JavaScript execution cannot be interrupted.

• React's solution: Starting from React 16, the Fiber architecture was introduced. Fiber uses a linked list structure to describe the UI, enabling interruptible rendering. The linked list structure allows React to pause and resume rendering when necessary.

For an official comparison between the two architectures (Stack vs. Fiber), refer to this demo.

 

Stack:

Fiber with under link structure:

Does Vue need a Fiber architecture?

Vue does not need a Fiber architecture. The reason lies in the difference in how Vue and React manage updates:

• Vue does not require recalculating the entire virtual DOM tree like React does. Instead, Vue’s reactivity system directly tracks which parts of the DOM need updating.
• Vue’s challenge lies elsewhere: having too many watchers.

To address this, Vue introduced the virtual DOM and combined it with its reactivity system, effectively changing the granularity of reactivity to optimize performance.