React组件生命周期中useEffect与componentDidMount的执行顺序解析

在React应用开发过程中，理解不同组件的生命周期方法的执行顺序至关重要。最近在React仓库中出现的一个有趣问题，揭示了函数组件中的useEffect与类组件中的componentDidMount在挂载阶段执行顺序的差异。

现象观察

当我们在类组件Parent中使用函数组件Child时，如果Child使用了useEffect而Parent使用了componentDidMount，控制台会先打印"Parent did mount"，然后才打印"Child did mount"。这与一些开发者预期的子组件生命周期先执行的直觉相反。

技术原理

这种看似反常的现象其实源于React对这两种生命周期方法的不同处理机制：

1. componentDidMount是类组件的生命周期方法，它会在组件挂载完成后同步执行，这意味着它会阻塞浏览器的渲染流程，确保在浏览器绘制前完成。

2. useEffect是函数组件的副作用钩子，它默认情况下会被React安排在浏览器完成绘制之后异步执行。这种设计是为了避免阻塞浏览器的渲染进程，提高页面响应速度。

深入理解执行顺序

React的这种设计决策基于性能优化的考虑：

• 类组件的componentDidMount是React早期版本的设计，它保证了在组件完全挂载后立即执行必要的逻辑。
• 函数组件的useEffect采用了更现代的异步渲染模式，遵循"渲染优先"的原则，允许浏览器先完成绘制，再处理副作用。

解决方案

如果确实需要子组件的副作用在父组件挂载完成前执行，可以使用useLayoutEffect替代useEffect。useLayoutEffect与componentDidMount类似，会在浏览器绘制前同步执行：

import { useLayoutEffect } from 'react';

const Child = (props) => {
  useLayoutEffect(() => {
    console.log("Child did mount");
  }, []);
  // ...其他代码
}

最佳实践建议

1. 在大多数情况下，应该优先使用useEffect，因为它的异步特性不会阻塞页面渲染。
2. 只有在需要同步读取DOM布局或执行必须在绘制前完成的操作时，才考虑使用useLayoutEffect。
3. 理解这种执行顺序差异有助于避免在组件间存在依赖关系时出现意外行为。

总结