关于react 父子组件的执行顺序

import React from 'react';
 
const buildClass = (name)=>{
  return class extends React.Component{
    constructor(props) {
      super(props);
      console.log( name + ' constructor');
    }
    UNSAFE_componentWillMount() {
      console.log( name + ' componentWillMount');
    }
    componentDidMount() {
      console.log( name + ' componentDidMount');
    }
    componentWillUnmount() {
      console.log( name + ' componentWillUnmount');
    }
    UNSAFE_componentWillReceiveProps(nextProps) {
      console.log( name + ' componentWillReceiveProps(nextProps)');
    }
    shouldComponentUpdate(nextProps, nextState) {
      console.log( name + ' shouldComponentUpdate(nextProps, nextState)');
      return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState) {
      console.log( name + ' componentWillUpdate(nextProps, nextState)');
    }
    componentDidUpdate(prevProps, prevState) {
      console.log( name + ' componetDidUpdate(prevProps, prevState)');
    }
  }
}
class Child extends buildClass('Child'){
  render(){
    console.log('Child render')
    return (
      <div>child</div>
    )
  }
}
class ClassFn extends buildClass('Parent'){
  render(){
    console.log('Parent render')
    return (
      <Child />
    )
  }
};
 
export default ClassFn;

//HooksFn.tsx，以下是此文件对应的代码
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
 
const Ai = props => {
  useEffect(() => {
    console.log("ai组件加载完成");
  });
  return <div className="ai" />;
};
 
const Home = props => {
  useEffect(() => {
    console.log("Home组件加载完成");
  });
  return (
    <div className="home">
      <Ai />
    </div>
  );
};
 
function HooksFn() {
  useEffect(() => {
    console.log("HooksFn组件加载完成");
  });
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Home />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 
export default HooksFn;

//HooksFn.tsx
import React, { useEffect } from "react";
  
const Ai = props => {
  useEffect(() => {
    console.log("ai组件加载完成");
  }, [props.name]);
  return <div className="ai" />;
};
 
const Home = props => {
  useEffect(() => {
    console.log("Home组件加载完成");
  }, [props.name]);
  return (
    <div className="home">
      <Ai {...props}/>
    </div>
  );
};
 
function HooksFn(props) {
  // Hooks中有依赖的情况
  useEffect(() => {
    console.log("HooksFn组件加载完成");
  }, [props.name]);
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Home {...props}/>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 
export default HooksFn;

import HooksFn from '@/pages/exercise/HooksFn';
 
<HooksFn name={'12'}/>