什么是useLayoutEffect？同步的副作用-js教程-PHP中文网

什么是useLayoutEffect？同步的副作用

小老鼠

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

原创

524人浏览过

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 (
    <div>
      <div ref={elementRef}>
        这段文字的高度会被测量。
      </div>
      <p>元素的高度是: {height}px</p>
    </div>
  );
}

export default MyComponent;

登录后复制

在这个例子中，

useLayoutEffect

登录后复制

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

useEffect

登录后复制

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

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

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

useEffect

登录后复制

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

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

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

useLayoutEffect

登录后复制

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

useLayoutEffect

登录后复制

的陷阱：性能问题

PHP开发实用指南 2.0

对于一个刚进入PHP 开发大门的程序员，最需要的就是一本实用的开发参考书，而不仅仅是各种快速入门的only hello wold。在开发的时候，也要注意到许多技巧和一些“潜规则”。PHP是一门很简单的脚本语言，但是用好它，也要下功夫的。同时，由于PHP 的特性，我一再强调，最NB 的PHP 程序员都不是搞PHP 的。为什么呢？因为PHP 作为一种胶水语言，用于粘合后端数据库和前端页面，更多需