We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关键词:useEffect 与 componentDidMount 区别
useEffect 是 React 函数组件的生命周期钩子,它是替代类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的统一方式。
useEffect
componentDidMount
componentDidUpdate
componentWillUnmount
当你给 useEffect 的依赖项数组传入一个空数组([]),它的行为类似于 componentDidMount,但实质上有些区别:
[]
执行时机:
清除操作:
执行次数:
实际上 useLayoutEffect 会更接近 componentDidMount 的表现,它们都同步执行且会阻碍真实的 DOM 渲染的
useLayoutEffect
The text was updated successfully, but these errors were encountered:
No branches or pull requests
关键词: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 渲染的The text was updated successfully, but these errors were encountered: