时间戳

首页 > 解决方案 > 子组件的 useEffect 在父组件的 useEffect 之前调用

reactjs - 子组件的 useEffect 在父组件的 useEffect 之前调用

问题描述

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

据我了解，useEffect应该按照根据 React文档定义的顺序调用它们：

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

这意味着，useEffect应该在 Children's 之前调用Parent's 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

标签： reactjsuse-effect

解决方案

这个：

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

更准确地说是：

React 将按照组件中指定的顺序应用组件使用的每个效果。

例如：

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

保证按顺序运行。

它并没有说明不同组件中效果的运行顺序。

推荐阅读