例如，如果我有组件 A 和 B，并且组件 B 是组件 A 的子组件：
<A>
<B />
</A>
在 A 里面我们有：
useEffect(() => {
console.log('Parent A useEffect')
})
在 B 内部我们有：
useEffect(() => {
console.log('Child B useEffect')
})
我做了一些测试，我看到了两件事：
- 第一次加载时（例如 F5 之后），日志结果为：
父 A useEffect
子B使用效果
- 如果我们转到另一个组件，然后返回组件 B（例如，不是通过重新加载，而是通过使用 React-router），日志结果为：
子B使用效果
父 A useEffect
在两种情况下，结果是相反的。这让我有点困惑。
我在谷歌上搜索了有关componentDidMount我发现了这个：https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount
The componentDidMount()之前调用子组件的方法
父组件的。
但我找不到相应的文档useEffect
那么正确的执行顺序是什么呢useEffect在父/子组件中？
好的，我会尽力消除您的困惑。
如果你有一些这样的组件
<A>
<B />
</A>
然后在第一次加载（重新加载）时日志将是
子B使用效果
父 A useEffect
然后假设您导航到某个路线，然后转到子组件日志将是
子B使用效果
父 useEffect 不会被调用。
正如反应文档所说
你可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
因此，所有这些生命周期方法都会在组件安装后调用，并且当组件安装时，该组件内的子组件已经被安装并且它们的生命周期已经被调用
Sandbox https://codesandbox.io/s/a-simple-react-router-v4tutorial-dt0u5为了让您了解如何调用 useEffect，它以 Roster 作为父级，以 Schedule 作为子级。如果您导航到 Header 并返回到 Schedule，则仅调用 useEffect。
在您的情况下，当您导航到子组件时，可能会调用 Parent useEffect ，但这是因为其他原因，也许您有一些回调来设置 Parent 状态，从而导致调用 useEffect ，但我们正在讨论 useEffect 如何工作一般情况
希望能帮助到你
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
