Interviewer: Tell me about your understanding of the react life cycle

Hello, this is Xiaochen. Today, let’s take a look at react life cycle is executed at various stages. Did you encounter this problem during the interview? You can also study the react source code system article. The article list is at the end of the article.

In the previous react source code, we can divide the rendering process of the application into the mount stage (application first rendering) and the update stage (application status update). Whether in the mount stage or the update stage, there will be two sub-stages, one is render One of the stages is commit .

mount :
1. In render based stage jsx build new objects workInProgressFiber tree, do not know Fiber double buffering can view Past articles Fiber architecture , then the corresponding fiber node labeled Placement , indicates that this fiber node needs to be inserted into dom tree fiber nodes with side effects are added to a linked list Effect List
2. In commit stage traverses render stages of formation Effect List , performed on the corresponding list fiber side node, such Placement inserted, or perform Passive ( useEffect side effects). Apply these side effects to real nodes
update :
1. In the render stage, we will compare current Fiber according to the latest state of jsx objects, and then construct a new workInProgressFiber tree. The comparison process is the diff algorithm. The diff algorithm is divided into single-node comparison and multi-node comparison. The article diff algorithm also undergoes the process of collecting side effects during the comparison process, which is to mark the difference and add it to Effect List . The side effects of these comparisons are for example: Placement (insert), Update (update), Deletion (Deleted) etc.
2. In the commit phase, it will also traverse Effect List , and apply the side effects on the fiber

Why should we first talk about render in the mount and update phases? This is because the react life cycle is executed in these sub-phases. Let’s look at a picture.

render stage:
1. mount : The component will first experience constructor , getDerivedStateFromProps , componnetWillMount , render
2. update : The component will first experience componentWillReceiveProps , getDerivedStateFromProps , shouldComponentUpdate , render
3. error getDerivedStateFromError will be called
commit stage
1. mount : The component will experience componnetDidMount
2. update : The component will call getSnapshotBeforeUpdate , componnetDidUpdate
3. unMount : Call componnetWillUnmount
4. error : call componnetDidCatch

The red part is not recommended to be used. It should be noted that the execution order of each sub-phase of the commit phase life cycle in mutation

Next, based on an example, explain the specific sequence of updates mount and update

react源码11.2

react源码11.3

mount wip Fiber node in a depth-first manner, and then switch to current Fiber . In the render constructor , getDerivedStateFromProps / componnetWillMount and render each node will be executed in commit . Time to execute the node's componnetDidMount
update wip Fiber tree will also be constructed in depth first. During the construction process, the diff child node will be constructed. In the render phase, if the existing node changes, such as c2 in the figure above, mark this node Update Flag and execute getDerivedStateFromProps render , in commit stage will be followed by the implementation of nodes getSnapshotBeforeUpdate , componnetDidUpdate