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'
    },
];

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

Answer 1

它与javascript 事件冒泡相同，这意味着当它运行时，它会调用所有ParentComponent函数，这些函数将调用并渲染ChildComponent，一旦调用内部函数（子渲染），它将再次冒泡到顶部，现在开始ParentComponent's useEffect了并将按顺序进行。

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