IT技术 - React 挂钩子组件 useEffect 在父组件之前先执行 - 吾爱随笔录

我正在学习 React 钩子 useEffect 并且我对 useEffect 的执行顺序感到困惑。在控制台中，它告诉我首先执行 ChildComponent“子组件”console.log，然后是“挂载时”useEffect，最后记录“父组件”。我希望首先记录“挂载”，然后是“父组件”，最后是“子组件”。谁能解释为什么孩子首先登录，或者为什么事情以这种方式执行？

字段是一个简单的对象数组

const fields = [
    {
        id    : 'month',
        title : 'Month'
    },
    {
        id    : 'amount',
        title : 'Amount'
    },
    {
        id    : 'year',
        title : 'Year'
    },
];

import React, { useEffect, useState } from 'react';

export default function ParentComponent(props) {
    const [fields, setFields] = useState(props.fields || []);

    useEffect(() => {
        console.log('on mount');
    }, []);

    useEffect(() => {
        console.log('parent component');
    }, [fields]);

    function randomString() {
        return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
    }



    return (
        <div>
            <button
                onClick={() => setFields([...fields,...[{id: randomString(), title: randomString()}]])}
            >Change field</button>
            <ChildComponent fields={fields}/>
        </div>
    );
}

function ChildComponent(props) {
    useEffect(() => {
        console.log('child component')
    }, [props.fields]);
    return (<div>
        {props.fields.map(({ id, title }) => <div key={id} className="field">{title}</div>)}
    </div>)
}