React Related Questions

1. Briefly describe the initial rendering process in React 16

• JSX converts to react elements

  • Babel-react converts JSX to the react. createElement function call
  • React. CreateElement JSX converts to a React Element.

• This stage is responsible for creating the Fiber data structure and marking the Fiber node, marking the DOM operations to be performed on the current Fiber node.

  • First, create a Fiber object for each React element (workInProgress Fiber tree). Add an effectTag attribute to the Fiber object (which records the DOM operation that fiber is currently performing), and after render ends, fiber is saved to FiberRoot.

• Commit stage (Render layer)

  • The renderer synchronously performs DOM operations on the Fiber node, based on the label the coordinator assigns to the node.
  • First, obtain the work results of render stage, namely the reconstructed workInProgress Fiber tree saved in fiberRoot object. FiberRoot. FinishedWork performs corresponding DOM operations according to the effectTag attribute in fiber object. Call the corresponding lifecycle function if a class component exists, or the useEffect hook function if a function component exists.

2. Why was recursion abandoned in the Render phase of React 16

In the React 15 version, virtualDOM is compared using a loop and recursion. Since recursion uses JavaScript’s own stack, once started, it cannot be stopped until the task is completed. If the VirtualDOM tree is deep, the VirtualDOM comparison will occupy the main thread of JavaScript for a long time. Because JavaScript is single-threaded and cannot perform other tasks at the same time, it cannot respond to user operations during the comparison process, and cannot execute element animations immediately. Caused the page to stall the phenomenon.

In the React 16 version, virtualDOM comparisons are done without JavaScript recursion in favor of looping to simulate recursion. And the process of comparison is using the browser’s idle time to complete, does not occupy the main thread for a long time, which solves the problem of virtualDOM comparison caused by the page lag.

3. Describe what the three subphases of the React 16 COMMIT phase do

CommitRoot changes the task priority. The default task priority is 97. The commit stage cannot be interrupted and the commit task must be executed with the highest priority. Change the task priority with runWithPriority and call commitRootImpl to start the COMMIT phase:

• First child stage: before mutation stage (before DOM operation)

  • Performs commitBeforeMutationEffects, processing class components getSnapShotBeforeUpdate lifecycle function (update phase execution of hook function)
  • For instance objects below to add attributes reactInternalSnapshotBeforeUpdate, storage snapshot, when performing componentDidUpdate life cycle function, In the middle of the third argument we will through the instance objects reactInternalSnapshotBeforeUpdate attribute the snapshots below

• Second substage: mutation stage (DOM operation performed)

  • CommitMutationEffects, change the workInProgress Fiber tree to the Current Fiber tree, and perform real DOM operations
  • Get the effectTag and perform DOM operations on it, Placement (insert for this node and its children), PlacementAndUpdate (insert and Update the DOM), Hydrating (server-side render), HydratingAndUpdate (server-side render), Update (Update) DOM), Deletion (DOM Deletion)

• Third sub-stage: Layout stage (after DOM manipulation)

  • If a component class called life-cycle function or function component invokes the useEffect call the commitLayoutEffectOnFiber processing
  • Class component: Gets the class component instance object, and calls the componentDidMount lifecycle function mounted on the instance object in the initial rendering phase. Update phase gets old props, gets old States, ComponentDidUpdate calling through the instance objects pass the old props, the old state, and the instance objects mounted __reactInternalSnapshotBeforeUpdate snapshot. Get the task queue, call commitUpdateQueue to process the third parameter of the Render function, callback, and render the callback to execute
  • The component inside the function handles the hook function: when the function component calls the hook function useEffect, it calls its passed callback, stores the return value of the callback (the cleanup function) in effect.destory, and calls the deStory cleanup function when the component is cleaned up

4. What is the significance of the workInProgress Fiber tree

In React, at most two Fiber trees exist at the same time. The current Fiber tree is called the Current Fiber tree. When updates occur, a new Fiber tree will be created in memory. The Fiber tree under construction is called the workInProgress Fiber Tree. In dual-cache technology, the workInProgress Fiber tree is the Fiber tree that will be displayed on the page. When the Fiber tree is built, React uses it to replace the current Fiber tree to quickly update the DOM. Because the workInProgress Fiber tree is built in memory, it is very fast to build.

In the Current Fiber node object there is an alternate property pointing to the corresponding workInProgress Fiber node object, There is an alternate property in the workInProgress Fiber node that also points to the corresponding Current Fiber node object. Two Fiber nodes are connected via the alternate property

The React root node uses the current pointer to switch between rootFibers of different Fiber trees to switch between Fiber trees. When the workInProgress Fiber tree is built and rendered on the page by the Renderer, apply the current pointer of the root node to the workInProgress Fiber tree, which becomes the Current Fiber tree. Each status update generates a new workInProgress Fiber tree, and DOM updates are completed by replacing current with workInProgress.

Because there are two Fiber trees, the updated state can be saved when the asynchronous interrupt is performed, and the previous state can be retrieved after the interrupt is returned. And both states can be reused, saving the time of building from scratch. WorkInProgress Fiber avoids frequent and numerous DOM operations