React Three enabling modes

Legacy mode:
ReactDOM.render(<App />, rootNode); // This is the mode currently used by the React App, but some new features may not be supportedCopy the code
Blocking mode:
ReactDOM.createBlockingRoot(rootNode).render(<App />); // Transition modeCopy the code
Concurrent mode:
ReactDOM.createRoot(rootNode).render(<App />); // Final modeCopy the code

Why are there three models

Of the three modes, the most common is legacy mode, which triggers a synchronous render link during rendering. Blocking mode is a transition from Legacy mode to Concurrent mode, which was created because the React team wanted to provide a gradual migration mode rather than a cliff switch mode. Concurrent mode is the ultimate React mode and the motivation for the React team to rewrite the core algorithm using Fiber architecture.

According to the official line, “In the long run, the number of patterns will converge, regardless of the different patterns, but for now, patterns are an important migration strategy, allowing everyone to decide when they want to migrate and move at their own pace”.

Difference between Legacy mode and Concurrent mode

React will change the mode property to a different value to indicate which render mode it is in. This attribute is also used to distinguish between different rendering modes during execution. In the source code, we can see that the fiber. Mode value is often used to indicate which mode is currently in. Here’s an example:

Function requestUpdateLane(fiber) {var mode = fibre. mode; If ((mode & BlockingMode) === NoMode) {return SyncLane; } else if ((mode & ConcurrentMode) === NoMode) { return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane; }... return lane; }Copy the code

Therefore, the difference of different rendering modes in the mount stage is not the difference of workflow (which involves initialization → render → commit) in essence, but the difference of mode attribute. The mode attribute determines whether the workflow is performed in one go (synchronous) or in fragments (asynchronous).

In other words, the difference between Legacy mode and Concurrent mode is the difference between synchronous asynchronous mode ==

Consider a question, is asynchronous rendering definitely Fiber?

As mentioned earlier, the Concurrenet model was the motivation for the React team to use Fiber to rewrite the core algorithm, but from a source reuse perspective, the Fiber architecture is already embedded in the source code, concurrent or not. In legacy mode there is Fiber, so the Fiber architect is not completely compatible with asynchronous rendering, it is compatible with both synchronous and asynchronous rendering.

Learn from: React in Plain English. Hope the text is helpful.