react中函数组件 - 父子组件的执行顺序

组件关系

• 父组件 - subAbout
• 子组件 - leftComponent & rightComponent
• 孙组件 - leftChildComponent(leftComponent的子组件)

代码结构

------------- subAbout -------------
import React, { useEffect, useState } from 'react'

import LeftComponent from '../../component/leftComponent'
import RightComponent from '../../component/rightComponent'

import './subAbout.scss'

const SubAbout = (props) => {
    
    console.log('【父组件】 主线程 ---------- ');
    const [isShow, setIsShow] = useState(true)

    useEffect(() => {
        console.log('【父组件】 副作用 --- ');
    })

    return (
        <div>
            {
                console.log('【父组件】return --- ')
            }
            <h1>哈哈 - subAbout - 1</h1>

            <div className='left-right'>
                <button onClick={() => {
                    setIsShow(false)
                }}>点击改变IsShow状态</button>
                <div className='content-all'>
                    <LeftComponent ></LeftComponent>
                    <RightComponent ></RightComponent>
                </div>
            </div>
        </div>
    )
}

export default SubAbout

------------- leftComponent -------------
import React, { useEffect, useState } from "react";
import LeftChildComponent from "../leftChildComponent";

const LeftComponent = (props) => {
    console.log('left组件 主线程 ---------- ');

    useEffect(() => {
        console.log('left组件 副作用 --- ');
    }, [])
    return(
        <div>
            {
                console.log('left组件return --- ')
            }
            <h2>left component</h2>
            <LeftChildComponent></LeftChildComponent>
        </div>
    )
}

export default LeftComponent

------------- rightComponent -------------
import React, { useEffect, useState } from "react";
const RightComponent = (props) => {
    console.log('right组件 主线程 ---------- ');

    useEffect(() => {
        console.log('right组件 副作用 --- ');
    })

    return(
        <div>
            {
                console.log('right组件return --- ')
            }
            <h2>right component</h2>
        </div>
    )
}

export default RightComponent

------------- leftChildComponent -------------
import React, { useEffect, useState } from "react";
const LeftChildComponent = (props) => {
    console.log('孙组件 - left child组件 主线程 ---------- ');

    useEffect(() => {
        console.log('孙组件 - left child组件 副作用 --- ');
    }, [])
    return(
        <div>
            {
                console.log('孙组件 - left child组件return --- ')
            }
            <h2>left child component</h2>
        </div>
    )
}

export default LeftChildComponent

第一种情况 - 第一次渲染时

运行结果

结论

• 当前组件的执行顺序
  • 主线程和dom render先执行
  • dom render的渲染永远在useEffect副作用之前
• 父子组件的执行顺序
  • 父组件的主线程和dom render先执行，子组件的后执行
  • 父子孙一样的执行顺序
  • useEffect最后执行，且执行的顺序是孙->子->父
• 兄弟组件的执行顺序
  • 按前后的顺序递归执行（如子组件包含子组件，则执行完当前组件的左右子组件，再执行下一个兄弟组件）

第二种情况 - 当点击父组件进行更新状态值时

运行结果

结论

跟第一次的运行结果一致