[React] useEffect 依赖为空数组与 componentDidMount 区别【热度: 366】

[yanlele]

关键词：useEffect 与 componentDidMount 区别

useEffect 是 React 函数组件的生命周期钩子，它是替代类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的统一方式。

当你给 useEffect 的依赖项数组传入一个空数组（[]），它的行为类似于 componentDidMount，但实质上有些区别：

1. 执行时机：

   • componentDidMount：在类组件的实例被创建并插入 DOM 之后（即挂载完成后）会立即被调用一次。
   • useEffect（依赖为空数组）：在函数组件的渲染结果被提交到 DOM 之后，在浏览器绘制之前被调用。React 保证了不会在 DOM 更新后阻塞页面绘制。

2. 清除操作：

   • componentDidMount：不涉及清理机制。
   • useEffect：可以返回一个清理函数，React 会在组件卸载或重新渲染（当依赖项改变时）之前调用这个函数。对于只依赖空数组的 useEffect，此清理函数只会在组件卸载时被调用。

3. 执行次数：

   • componentDidMount：在 render 执行之后，componentDidMount 会执行，如果在这个生命周期中再一次 setState ，会导致再次 render ，返回了新的值，浏览器只会渲染第二次 render 返回的值，这样可以避免闪屏。
   • useEffect：是在真实的 DOM 渲染之后才会去执行，在这个 hooks 中再一次 setState, 这会造成两次 render ，有可能会闪屏。

实际上 useLayoutEffect 会更接近 componentDidMount 的表现，它们都同步执行且会阻碍真实的 DOM 渲染的