React 中 useEffect 的依赖数组为空([])时,其行为等价于类组件中的哪个生命周期方法?

React 中 useEffect 的依赖数组为空([])时,其行为等价于类组件中的哪个生命周期方法?

答:等价于 componentDidMount。

解析:
在函数组件中使用 useEffect 时,如果传入的依赖数组为空([]),则该 effect 只会在组件首次挂载后执行一次,不会在后续的重新渲染中再次执行。这种行为与类组件中的 componentDidMount 生命周期方法一致——componentDidMount 也是在组件挂载完成后仅执行一次。

需要注意的是,useEffect(() => {...}, []) 与 componentDidMount 仍有一些细微差别:

  • useEffect 是异步执行的,发生在浏览器完成布局与绘制之后;而 componentDidMount 是同步执行的(在 DOM 更新后立即执行)。
  • 如果在 useEffect 中返回一个清理函数,该函数会在组件卸载前执行,类似于 componentWillUnmount 的行为。

因此,虽然行为上等价于 componentDidMount,但底层机制略有不同。

发表评论 (审核通过后显示评论):

昵称:
邮箱:
内容: