首页uselayouteffect

uselayouteffect

时间: 2025-02-19 12:33:00 浏览: 46

### React `useLayoutEffect` Hook 使用方法 #### 一、概述 `useLayoutEffect` 是一种特殊的 Effect Hook，在所有的 DOM 变更之后同步调用。它会阻塞浏览器更新屏幕，因此应当谨慎使用以免影响性能[^1]。 #### 二、何时使用 `useLayoutEffect` 当需要读取 DOM 布局并同步重新渲染时应优先考虑此钩子。如果处理的是视觉上的副作用，则通常应该选用标准的 `useEffect` 钩子来代替，因为其不会阻止浏览器绘制新帧[^2]。 #### 三、基本语法结构 ```javascript import React, { useState, useLayoutEffect } from 'react'; function MeasureExample() { const [height, setHeight] = useState(0); useLayoutEffect(() => { function measure() { const measuredHeight = document.getElementById('measuredElement').clientHeight; setHeight(measuredHeight); } window.addEventListener('resize', measure); measure(); // Initial call to get height on mount. return () => { window.removeEventListener('resize', measure); }; }, []); return ( <div> <h1 id="measuredElement">Hello!</h1> <p>Height of above element is: {height}px</p> </div> ); } ``` 上述例子展示了如何利用 `useLayoutEffect` 来测量页面上某个元素的高度变化，并立即响应这些改变而无需等待下一个重绘周期完成[^3]。 #### 四、注意事项 - 尽量减少对 `useLayoutEffect` 的依赖，因为它可能导致应用变得缓慢。 - 对于大多数情况下的副作用操作（比如网络请求），推荐继续沿用普通的 `useEffect` 函数。

阅读全文