Open yanlele opened 3 months ago
关键词:useEffect 与 componentDidMount 区别
useEffect 是 React 函数组件的生命周期钩子,它是替代类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的统一方式。
useEffect
componentDidMount
componentDidUpdate
componentWillUnmount
当你给 useEffect 的依赖项数组传入一个空数组([]),它的行为类似于 componentDidMount,但实质上有些区别:
[]
执行时机:
清除操作:
执行次数:
实际上 useLayoutEffect 会更接近 componentDidMount 的表现,它们都同步执行且会阻碍真实的 DOM 渲染的
useLayoutEffect
关键词:useEffect 与 componentDidMount 区别
useEffect
是 React 函数组件的生命周期钩子,它是替代类组件中componentDidMount
、componentDidUpdate
和componentWillUnmount
生命周期方法的统一方式。当你给
useEffect
的依赖项数组传入一个空数组([]
),它的行为类似于componentDidMount
,但实质上有些区别:执行时机:
componentDidMount
:在类组件的实例被创建并插入 DOM 之后(即挂载完成后)会立即被调用一次。useEffect
(依赖为空数组):在函数组件的渲染结果被提交到 DOM 之后,在浏览器绘制之前被调用。React 保证了不会在 DOM 更新后阻塞页面绘制。清除操作:
componentDidMount
:不涉及清理机制。useEffect
:可以返回一个清理函数,React 会在组件卸载或重新渲染(当依赖项改变时)之前调用这个函数。对于只依赖空数组的useEffect
,此清理函数只会在组件卸载时被调用。执行次数:
componentDidMount
:在 render 执行之后,componentDidMount 会执行,如果在这个生命周期中再一次 setState ,会导致再次 render ,返回了新的值,浏览器只会渲染第二次 render 返回的值,这样可以避免闪屏。useEffect
:是在真实的 DOM 渲染之后才会去执行,在这个 hooks 中再一次 setState, 这会造成两次 render ,有可能会闪屏。实际上
useLayoutEffect
会更接近componentDidMount
的表现,它们都同步执行且会阻碍真实的 DOM 渲染的