React函数组件Hooks-useLayoutEffect详解，从此对布局副作用了解更透彻

前端

2023-10-16 11:23:18

React 函数组件中的 useLayoutEffect 钩子：深入剖析

什么是 useLayoutEffect？

useLayoutEffect 是 React 函数组件中专用于执行布局副作用的 Hooks 钩子，并在浏览器渲染界面之前触发。它与另一个常见的副作用钩子 useEffect 类似，但二者之间存在着关键差异。

useLayoutEffect 的特点

执行时机： useLayoutEffect 会在浏览器渲染之前执行，而 useEffect 则会在渲染完成后执行。
DOM 修改： useLayoutEffect 允许修改 DOM，而 useEffect 则不行。
应用场景： useLayoutEffect 通常用于需要在浏览器渲染之前进行布局更新的情况，例如更改元素的位置或大小。

useLayoutEffect 的优缺点

优点：

性能优化： 由于在渲染之前执行，useLayoutEffect 可以优化性能。
DOM 修改： 可以直接操作 DOM，提供更灵活的布局更新方式。

缺点：

组件限制： useLayoutEffect 只能在函数组件中使用，而 useEffect 可以在函数组件和类组件中使用。
布局闪烁： 由于浏览器需要先渲染一次，再执行 useLayoutEffect 更新布局，可能导致布局闪烁。

useLayoutEffect 的应用场景

useLayoutEffect 常用于以下场景：

需要在渲染之前执行布局更新，如更改元素位置或大小。
需要修改 DOM，如添加或删除元素。
需要在渲染后立即执行某些操作，如滚动到特定元素。

示例代码

import React, { useState, useEffect, useLayoutEffect } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect", count);
  }, [count]);

  useLayoutEffect(() => {
    console.log("useLayoutEffect", count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default App;