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