React 16 initial render flow

Render Stage (Coordination layer):

  • Call the lifecycle hook -> Generate virtualDOM
  • For each virtualDOM -> build a Fiber object -> transform the Fiber array -> and create the corresponding DOM object for it
  • Add effectTag attributes (Delete, Add, update)

The commit phase

  • Render real DOM nodes

    The lifecycle functions (V16.3) experienced as follows: Constructor getDerivedStateFromProps Render componentDidMount ** The lifecycle functions were changed in V16.4Copy the code

Why was recursion abandoned in the Render phase of React 16

What do the three subphases of the COMMIT phase do in the React 16 version

What is the purpose of the workInProgress Fiber tree