好奇：useEffect和useLayoutEffect的区别

最新推荐文章于 2024-04-30 14:18:08 发布

#做一个清醒的人

最新推荐文章于 2024-04-30 14:18:08 发布

阅读量1.8k

点赞数

分类专栏： React 文章标签： reactHook react.js

本文链接：https://blog.csdn.net/rock_23/article/details/124399045

版权

React 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

useLayoutEffect 和 useEffect 是一样的，只是两个 hook 执行的时机不同。
上面说了 useLayoutEffect 是在 DOM 变更之后同步调用 effect（就是传入到useLayoutEffect中的函数）,所以 useLayoutEffect 会比 useEffect 执行得早一些。
注意：
1、会在react渲染完之前执行所以会比useEffect钩子执行会晚（此时dom也已经被渲染出来了）
2、会阻塞渲染，除非要操作dom 否则不推荐使用这个钩子
DOM 变更之后同步调用 effect。
useLayoutEffect的示例：

//Index.js 
//引入按钮组件
import Button  from './Button'; 
const  Index = () => {  
  const [count, setCount] = useState(0);  
  const onClick = ()=> {  
  	setCount(prevState => prevState + 1)
  }
  
  useLayoutEffect(()=>{ 
 	console.log('Index 渲染完成')
  }) 

  return <>
      <p>count:{count}</p> 
      <Button onClick={onClick}>加1</Button>
  </>
}
export default Index;