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
 */
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值