useLayoutEffect ——React 个人学习笔记（10）

useLayoutEffect

用法跟useEffect是一样的

好像只有执行时机的区别

官方这么说

useLayoutEffect can hurt performance.

useLayoutEffect 会影响性能

也许是因为useLayoutEffect是同步的

• useEffect执行时机是在React的渲染和提交阶段之后；
• useLayoutEffect执行时机是在React的提交阶段之后，但在浏览器实际绘制屏幕之前。

所以应该跟dom有关的用useLayoutEffect

其他数据什么的用useEffect就行了

useEffect对性能影响较小 因为他不会阻塞

不要滥用吧还是

使用

import { useLayoutEffect } from 'react'

function LayoutEffect() {
  useLayoutEffect(() => {
    console.log('useLayoutEffect')
  })
  return (<>1</>)
}

export default LayoutEffect

可以执行一下比如获取页面高度然后操作之类的