您的位置:首页 > 科技 > 能源 > React useEffect 执行时机

React useEffect 执行时机

2025/2/26 8:29:04 来源:https://blog.csdn.net/woyaoshengzhang/article/details/139797923  浏览:    关键词:React useEffect 执行时机

默认情况下,Effect 在每次渲染(包括初始渲染)后运行。
如果 React 的所有依赖项都与上次渲染时的值相同,则将跳过本次 Effect。

useEffect(() => {// 这里的代码会在每次渲染后执行
});useEffect(() => {// 这里的代码只会在组件挂载后执行return () =>{// 这里的 cleanup 清理函数,在组件卸载时执行}
}, []);useEffect(() => {//这里的代码只会在每次渲染后,并且 a 或 b 的值与上次渲染不一致时执行return () =>{// cleanup 清理函数// 1. 在 React 执行该 Effect 之前,它会执行最近一次渲染的 Effect cleanup 函数。// 2. 在组件卸载时执行}
}, [a, b]);

不必使用 Effect 来转换渲染所需的数据

当更新 state 时 (setState):

  1. React 首先会调用组件函数来计算应该显示在屏幕上的内容(渲染)
  2. 然后会把这些变化“提交”到 DOM 中来更新屏幕(提交)
  3. 然后 React 会执行 Effect
  4. 如果 Effect 中 也立即更新了 state,就会重新执行整个流程。
    为了避免不必要的渲染流程,应在组件顶层转换数据。这些代码会在你的 props 或 state 变化时自动重新执行。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com