什么是useLayoutEffect？同步的副作用

小老鼠

发布时间：2025-08-16 09:24:02

531人浏览过

来源于php中文网

原创

useLayoutEffect 在浏览器绘制前同步执行，适合处理需读取 DOM 布局并避免闪烁的场景，如测量元素尺寸后立即调整位置；useEffect 在绘制后异步执行，适用于网络请求等无需阻塞渲染的操作；二者本质区别在于执行时机，useLayoutEffect 可能阻塞渲染，应谨慎使用以避免性能问题。

什么是uselayouteffect？同步的副作用

useLayoutEffect

就像

useEffect

的一个同步版本。区别在于

useLayoutEffect

会在浏览器绘制屏幕之前执行，而

useEffect

会在绘制之后执行。这意味着

useLayoutEffect

可以用来读取 DOM 布局并同步更新，避免闪烁。

解决方案：

useLayoutEffect

的主要用途是处理那些需要在 DOM 更新后立即执行，并且可能会影响页面布局的操作。比如，你需要测量一个元素的尺寸，然后根据这个尺寸来调整另一个元素的位置。

import React, { useState, useRef, useLayoutEffect } from 'react';

function MyComponent() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    if (elementRef.current) {
      // 测量元素的实际高度
      const actualHeight = elementRef.current.offsetHeight;
      // 同步更新状态，触发重新渲染
      setHeight(actualHeight);
    }
  }, []); // 空依赖数组，只在组件挂载后执行一次

  return (
    
      
        这段文字的高度会被测量。
      
      元素的高度是: {height}px
    
  );
}

export default MyComponent;

在这个例子中，

useLayoutEffect

确保了我们能在浏览器绘制之前获取到元素的实际高度，并用这个高度来更新组件的状态。

useEffect

也可以用来做类似的事情，但是可能会出现闪烁，因为状态更新和重新渲染发生在浏览器绘制之后。

为什么需要同步的副作用？

想象一下，你有一个元素，它的位置取决于另一个元素的高度。如果使用

useEffect

，可能会发生这样的情况：

浏览器先绘制初始状态的页面。
```
useEffect
```
执行，测量元素高度。
状态更新，组件重新渲染。
浏览器再次绘制页面，这次元素的位置是正确的。

在两次绘制之间，用户会看到元素的位置发生了变化，这就是闪烁。

useLayoutEffect

可以避免这种情况，因为它在第一次绘制之前就完成了所有的计算和更新。

YXPHP6.0 豪华版

YXPHP6系统可以看做是一个模版平台,而且它又能独立工作. 而且YXPHP6系统也不需要数据库支持. 你可以开发自己的模板,也可以同步官方的模板后进行自己的二次开发,前提是您对YXPHP6要有一定的了解.YXPHP6不仅可以用作企业建站,甚至是blog,只要是您能想到的,YXPHP6几乎都可以胜任. 因为YXPHP6系统本身与模板之间可以说是独立运行的.也就是说,不管你做什么样的网站或者是应用,

下载