React nested component construction order

In the React official website, you can see the description of the life cycle

One question here is, in nested components, is the parent component built first or the child component built first? Should the child component be updated first, or the parent component?

To solve this problem, you can start by nesting single elements. Below is a component Parent with only DOM elements

function Parent(){
  return (
    <div>child</div>
  )
}

For the above element, React will call React.createElement to create an object. This is the construction phase of the child element (babeljs.io is used here)

React.createElement("div", null, "child")

After building, it’s time to render and update

Next, let’s look at nested components.

function Child() {
  return <div>child</div>
}
function Parent(){
  return (
   <Child>parent child</Child>
  )
}

React will call React.createElement and pass in the following parameters

function Child() {
  return React.createElement("div", null, "child");
}

function Parent() {
  return React.createElement(Child, null, "parent child");
}

Here we can see the construction process of the parent-child component. First, the current component is built, then it enters the component and continues to build. The principle followed is from top to bottom.

Next, let's look at passing in multiple components

function Child() {
  return <div>child component</div>
}
function Parent(){
  return (
    <div>
     <div>div element</div>
     <Child />
    </div>
  )
}

The following parameters are passed into React.createElement

React.createElement("div", null, React.createElement("div", null, "div\u5143\u7D20"), React.createElement(Child, null))
React.createElement("div", null, "child\u7EC4\u4EF6")

It can be further clarified that the construction of the subcomponent is separate from the parent component and is created after the parent component is built. So the construction order of parent-child components is parent component constructor, render child component constructor, render

When the child component renders, componentDidMount is called

Build Summary

In the case of multiple components, first the parent element constructor is initialized and starts mounting, then render is called

For DOM elements, they are created immediately. For React components, they are entered into the component later and the previous constructor, construction, and rendering are repeated until the last child element.

When the last child component renders, componentDidMount is called. That is, the element has been mounted. Then it will go up layer by layer and call componentDidMount in sequence

A little off topic

The following code can help understand the above content

// The function of RenderChild is to render children when a value is received, and render other elements when there is no value. function RenderChild(props){
  return (
    props.a ? props.children : <div>aaaa</div>
  )
}

Writing method 1 (directly rendering DOM elements):
function Parent(){
  let a = undefined;
  setTimeout(() => {
    a = { b: 1 };
  });
  return (
    <RenderChild val={a}>
      <div>{ab}</div>
    </RenderChild>
  )
}

Writing method 2 (rendering component):
function Child(props) {
  return <div>{props.ab}</div>
}

function Parent(){
  const a = undefined;
  setTimeout(() => {
    a = { b: 1 };
  });
  return (
    <RenderChild val={a}>
      <Child childVal={a} />
    </RenderChild>
  )
}

In the above two ways of writing, the first one will definitely report an error

Because the first build parameter is

React.createElement(RenderChild, { val: a }, React.createElement("div", null, ab))
At this time a is still undefined

The second build parameter is

function RenderChild(props) {
  return props.val ? props.children : React.createElement("div", null, "aaaa");
}

function Child(props) {
  return React.createElement("div", null, props.value.b);
}
React.createElement(RenderChild, { val: a }, React.createElement(Child, {
    value: a
 }));

Because Child is constructed after RenderChild, no error will be reported even if a non-existent value is used in Child.

Final summary

1. The construction and mounting of React components are from the root element to the child element, so the data flow is from top to bottom. The mounting is completed and the status is updated from the child element to the root element. At this time, the latest status can be passed to the root element.

2. One difference between components and DOM elements is that DOM elements are created at the current location, while React components are constructed and rendered in a hierarchical order.

The above is the detailed content of the construction order of React nested components. For more information about the construction of React nested components, please pay attention to other related articles on 123WORDPRESS.COM!