react hooks父子组件的代码执行顺序

/**
 * react hooks代码的执行顺序：
 * 1. 先要了解js的事件循环机制，了解主线程，任务队列，宏任务，微任务
 * 2. 先执行父组件的主线程代码，再执行子组件的主线程代码；
 * 3. 先执行子任务的useEffect,再执行父组件的useEffect
 * 有一些场景，需要父组件的执行顺序在子组件前面，可以考虑一下使用useLayoutEffect
 */
import React, { useEffect } from "react";

const Grandson = props => {
  console.log("孙组件主线程")
  useEffect(() => {
    console.log("孙组件useEffect");
  });
  console.log("孙组件主线程1")
  return <div className="Grandson" />;
};

const Son = props => {
  console.log("子组件主线程")
  useEffect(() => {
    console.log("子组件组件useEffect");
  });
  console.log("子组件主线程1")
  return (
    <div className="home">
      <Grandson />
    </div>
  );
};

function HooksFn() {
  console.log("父组件主线程")
  useEffect(() => {
    console.log("父组件组件useEffect");
  });
  useLayoutEffect(() => {
    console.log("父组件组件useLayoutEffect");
  }, [])
  console.log("父组件主线程1")
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Son />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default HooksFn;

/**
 * 上述代码执行顺序:
 * 父组件主线程
 * 父组件主线程1
 * 子组件主线程
 * 子组件主线程1
 * 孙组件主线程
 * 孙组件主线程1
 * 父组件组件useLayoutEffect
 * 孙组件useEffect
 * 子组件组件useEffect
 * 父组件组件useEffect
 */
 ### 扩展
/**
 * 浏览器里Performance的作用，面板性能监控详解
 * https://blog.csdn.net/qq_42231156/article/details/124617782
 */
/**
 * 疑问？
 * 1. react的钩子函数是同步还是异步的？如果是异步，是宏任务还是微任务？
 * 2. react hooks 父子组件的执行顺序，是先子组件的hooks，然后是父组件的hooks，所以应该不是队列，那会是栈结构吗？
 * 3.React中setState是异步的吗？
 * setState并不是异步的，它其实是模拟异步的行为，并非真正的异步。
 * 优秀帖子：https://blog.csdn.net/XiaoSen207/article/details/125293468
 */