Article content output source: pull hook big front-end high salary training camp

1. Briefly describe the initial rendering process in React 16

A: The App component is rendered in the root div, which has an ID attribute of root. Before traversing further, React Fiber creates a root Fiber. Each Fiber tree has a root node. In our case, it is HostRoot. If we import multiple React Apps into the DOM, we will have multiple roots. There are no trees until the first rendering. React Fiber iterates through the output of the Render function for each component and creates a Fiber node for each React element in the tree. It USES createFiberFromTypeAndProps converts elements React to fiber. The React element can be a class component or a host component, such as a div or span. For the class component, it creates an instance, and for the host component, it gets data/attributes from the React Element. The React Fiber tree uses the return attribute to specify the parent Fiber for the current creation and the sibling for the next sibling Fiber node. Each fiber is a node in a linked list, connected by a child reference, sibling reference, and return reference.

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

A: Because recursion, once performed, takes up the main thread until the recursion is complete, the main thread can handle other tasks, which in the case of complex components can lead to page suspension, resulting in poor page performance and poor user experience.

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

A: Substage 1: call the getSnapshotBeforeUpdate life cycle function of the class component; substage 2: submit the side effect of the HostComponent, i.e. the DOM node operation (add, delete, change); substage 3: Fiber switches the workInProgress Fiber tree to the current tree, and the workInProgress Fiber tree becomes current. Lifecycle hooks, setState Callbacks, Ref Callbacks, and component-level error handling methods are then called.

4. What is the significance of the workInProgress Fiber tree

A: When React starts updating, it builds what’s called a workInProgress Fiber tree, which reflects the future state that will be refreshed to the screen. The workInProgress Fiber tree is used to collect updates and is not visible to the user. Once the workInProgress Fiber tree is rendered on the screen, it becomes a Current tree.