1. React 16 Initial rendering is divided into render and COMMIT phases. The main process is as follows:

    • Construct FiberRoot and rootFiber objects and establish a reference relationship
    • Calculate the expiration time, determine the task priority, and create tasks to be executed
    • To check whether a task is a synchronization task, invoke the synchronization task entry
    • Build the workInProgress Fiber tree
    • Complete the Render phase and enter the commit phase
    • Commit the first phase, calling the getSnapshotBeforeUpdate lifecycle function of the class component
    • Commit the second phase, which performs DOM manipulation based on the effectTag
    • Commit the third phase, calling the class component’s lifecycle function componentDidMount or calling the function component’s useEffect hook function

  2. VirtualDOM objects in the Render phase of React 16 use a loop recursion to compare with virtualDOM objects in the render phase of React 16. If the virtualDOM object level is very deep, JavaScript is a single-threaded task and cannot be interrupted. In this way, users’ operations cannot respond in time, animations cannot be loaded, and the page is stuck. React 16 eliminates looping recursion in favor of looping simulation recursion and uses the browser’s idle time for comparison, thus solving the problem of stagnant pages

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

    Phase 1: Call the getSnapshotBeforeUpdate lifecycle function of the class component

    Stage 2: DOM manipulation based on effectTag

    Phase 3: Call the life cycle function componentDidMount or useEffect hook function of the function component

  4. When updating, the workInProgress Fiber tree is built in memory, which will be used to replace the current Fiber tree, so as to quickly update DOM and complete page updates