Question

我试图理解为什么子级组件useEffect在父级组件useEffect之前被调用。

据我了解，useEffect应该按照基于React的documentation定义的顺序来调用：

React将按照指定的顺序应用组件使用的所有效果。

这意味着，应该在孩子的useEffect之前调用父母的useEffect，但这不是事实。

示例：

const MainComponent = () => {
  return {
    <ParentComponent />
      
}

const ParentComponent = () => {
  useEffect(() => {
    console.log('parent');
  }, []);
  return <div>Parent <ChildrenComponent /></div>;
}

const ChildrenComponent = () => {
  useEffect(() => {
    console.log('children');
  }, []);
  return <div>Children</div>; 
}

如果您检查控制台，则应该首先看到children，然后看到parent

实时代码：https://codesandbox.io/s/crazy-butterfly-yn046?file=/src/App.js

我的直觉告诉我，这与Layout和Paint对“父子”组件的反应有何关系？

Answer 1

此：

React将按照指定的顺序应用组件使用的所有效果。

将更精确地表示为：

React将按照该组件中指定的顺序应用该组件使用的所有效果。

例如：

const SomeComponent = () => {
  useEffect(() => {
    console.log('This will run first');
  });
  useEffect(() => {
    console.log('This will run second');
  });
  // ...

保证按顺序运行。

这没说什么影响在不同组件中运行的顺序。

子组件的useEffect在父类的useEffect之前调用

1 个答案: