Shulou(Shulou.com)06/03 Report--

This article focuses on "when the React component render", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "when the React component render"!

For the following Demo, click the div of the Parent component, trigger the update, and the Son component will print the child render! Huh?

Function Son () {console.log ('child renderings'); return Son;} function Parent (props) {const [count, setCount] = React.useState (0); return ({setCount (count + 1)}} > count: {count} {props.children});} function App () {return () } const rootEl = document.querySelector ("# root"); ReactDOM.render (, rootEl)

Online Demo address [1]?

Swipe right to show the answer: no

Conditions that render needs to meet

When React creates a Fiber tree, the fiber for each component is created by one of the following two logic:

Render . That is, the render function is called to create a new fiber based on the returned JSX.

Bailout . That is, when certain conditions are met, React determines that the component has not changed before and after the update, then reuse the fiber of the last update of the component as the fiber of this update.

As you can see, the render function is not called when the bailout logic is hit.

Therefore, the Son component does not print child render! Because it hit the bailout logic.

Conditions that bailout needs to meet

Under what circumstances will you enter the bailout logic? When the following four conditions are met simultaneously:

1. OldProps = = newProps?

That is, the props (newProps) of this update is not equal to the props (oldProps) of the last update.

Note that this is an congruent comparison.

We know that the component render returns that JSX,JSX is the syntax sugar of React.createElement.

So the return result of render is actually the execution result of React.createElement, that is, an object that contains the props property.

Even though there is no change in every parameter in the props update between this update and the last update, this update is the result of the execution of React.createElement and is a new props reference, so oldProps! = newProps.

If we use PureComponent or Memo, when determining whether to enter render or bailout, we will not determine whether oldProps and newProps are congruent, but will make a shallow comparison of each attribute in the props.

2. Context has not changed.

That is, the value of context has not changed.

3. WorkInProgress.type = = current.type?

Whether the fiber.type changes before and after the update, such as whether div changes to p.

4. IncludesSomeLane (renderLanes, updateLanes)?

Is there an update on the current fiber, and if so, is the priority of the update the same as the priority scheduled for the entire fiber tree this time?

If consistent, enter the render logic.

As far as our Demo is concerned, Parent is the only component in the entire tree that can trigger updates (by calling setCount).

So the fiber corresponding to Parent is the only fiber that satisfies condition 4.

Detailed execution logic of Demo

Therefore, the entry of Son into bailout logic in Demo must meet the above four conditions at the same time. Let's look at it one by one.

Condition 2 context is not used in Demo, it is satisfied.

Condition 3, the type is the corresponding function component of Son before and after the update, which is satisfied.

Condition 4 cannot trigger the update by itself, which is satisfied.

So, the point is condition 1. Let's take a look at it in detail.

At the beginning of this update, there are two fiber in the Fiber tree:

FiberRootNode | RootFiber

Where FiberRootNode is the root node of the whole application, and RootFiber is the fiber created by calling ReactDOM.render.

First, RootFiber enters the logic of bailout, so the returned App fiber is the same as before the update.

FiberRootNode | RootFiber | App fiber

Because App fiber is returned by RootFiber in the bailout logic, for App fiber,oldProps = = newProps. And the remaining three conditions of bailout are also satisfied.

So App fiber will also take the bailout logic and return Parent fiber.

FiberRootNode | RootFiber | App fiber | Parent fiber

Because the update is triggered by Parent fiber, he does not meet condition 4 and will follow the logic of render.

Next comes the key.

If the Son returned by render is in the following form:

Will be compiled to

React.createElement (Son, null)

Return JSX after execution.

OldProps! = = newProps due to a change in the reference to props. Can follow render logic.

But in Demo, Son is in the following form:

{props.children}

Where props.children is the JSX corresponding to Son, and the props here is returned by App fiber after following the bailout logic.

Therefore, the corresponding JSX of Son is the same as that of the last update, and the props saved in JSX is the same, which meets condition 1.

As you can see, Son meets all the conditions of bailout, so it will not render.

At this point, I believe you have a deeper understanding of "React component when render", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.