You can see the life cycle description on the React website

The question here is, in nested components, does the parent or child build first? Does the child component update first, or does the parent component update first

You can solve this problem by nesting individual elements. Here is a Parent component with only DOM elements

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

For the above element, React calls React. CreateElement to create an object, which is the child element’s construction phase (babeljs.io/ is used here).

React.createElement("div", null, "child")
Copy the code

After the build, render and update

Next, look at nested components

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

React calls React. CreateElement with the following arguments

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

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

Here we see the parent-child component building process, first from the current component, then into the component, and continue to build, following the principle of top to bottom

Now look at passing in multiple components

Function Child() {return <div> Child component </div>} function Parent(){return (<div> <div>div element </div> <Child /> </div>)}Copy the code

In React. CreateElement the following arguments are passed

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

It can be further clarified that the child component is built separately from the parent component and is created after the parent component is built. So the parent component construction order is parent constructor, render child constructor, render

When the child component render is done, componentDidMount is called

Build a summary

In the multi-component case, the parent element constructor initializes and begins the mount, followed by the call to Render

For the DOM element, it is created immediately, and for the React component, it is then entered into the component, repeating the previous constructor, build, render, until the last child element

When the last child component render is done, componentDidMount is called. The element has been mounted. And then I’m going to go up and call componentDidMount

Specific process can look at this article www.cnblogs.com/soyxiaobi/p…

Go off topic a little bit

The following code can help you understand the above

Function RenderChild(props){return (props. A? Children: <div> props </div>)} function Parent(){let a = undefined; setTimeout(() => { a = { b: 1 }; }); <RenderChild val={a}> <div>{a.b}</div> </RenderChild>)  function Child(props) { return <div>{props.a.b}</div> } function Parent(){ const a = undefined; setTimeout(() => { a = { b: 1 }; }); return ( <RenderChild val={a}> <Child childVal={a} /> </RenderChild> ) }Copy the code

Of the two above, the first is bound to report an error

Because the first build parameter is

React.createElement({val: a}, react. createElement("div", null, a.b)Copy the code

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
 }));
Copy the code

Because the Child is built after the RenderChild, no error is reported even if a nonexistent value is used in the Child

The final summary

1. The React component is built and mounted from the root element to the child element, so data flows from top to bottom. When the mount is complete and the state is updated from the child element to the root element, the latest state can be passed to the root element

2. One difference between components and DOM elements is that DOM elements are created in their current location, whereas React components are built and rendered in a hierarchical order