React hooks子组件useEffect首先执行，在父组件之前

Question

我正在学习 react hooks useEffect，但我对 useEffect 的执行顺序感到困惑。在控制台中，它告诉我首先执行 ChildComponent“子组件”console.log，然后执行“挂载”useEffect，最后记录“父组件”。我期望首先记录“挂载”，然后是“父组件”，最后是“子组件”。 谁能解释为什么孩子先登录，或者为什么事情会这样执行？

Fields 是一个简单的对象数组

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>)
}

Answer 1

它和javascript event bubbling 一样，这意味着当它运行时，它会调用所有ParentComponent 函数，这些函数将调用并渲染ChildComponent，一旦调用了inner-est 函数（子渲染）它就会冒泡再次回到顶部，现在ParentComponent's useEffect 开始并按顺序排列。

我已经修改了你的代码，所以你可以看到更多我所指的顺序 https://codesandbox.io/s/silly-jennings-9hwwv?file=/src/App.js