useEffect 和 useLayoutEffect

今天无意中看到了 useLayoutEffect这个生命周期，这个倒从来没用过，果断了解了一下。

React Hooks 为函数组件提供了状态和生命周期特性，使得在不编写类组件的情况下管理状态变得更加方便。useEffect 和 useLayoutEffect 是React中的两个Hook，用于处理组件的副作用，例如数据获取或手动更改DOM等。

useEffect

useEffect 相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的组合。它允许你在函数组件中执行副作用操作。

基本用法

import { useEffect } from 'react';

function MyComponent({ someValue }) {
  useEffect(() => {
    // 副作用代码
    console.log('副作用执行了，且someValue为:', someValue);

    // 卸载时会执行的函数
    return () => {
      console.log('组件卸载时执行');
    };
  }, [someValue]); // 依赖项数组

  return <div>My Component</div>;
}

在上面的例子中，只有当 someValue 发生变化时，useEffect 内的代码才会执行。通过返回一个函数，可以在组件卸载时执行操作，这类似于 componentWillUnmount。

useLayoutEffect

useLayoutEffect 与 useEffect 类似，但它会在DOM更新后同步执行副作用，注意这里是同步。这意味着useLayoutEffect内的代码会在浏览器绘制之前执行，这可能会导致性能问题，因为它阻塞了视图的渲染。

基本用法

import { useLayoutEffect } from 'react';

function MyComponent({ someValue }) {
  useLayoutEffect(() => {
    // 同步副作用代码
    console.log('同步副作用执行了，且someValue为:', someValue);
  }, [someValue]); // 依赖项数组

  return <div>My Component</div>;
}

选择 useEffect 还是 useLayoutEffect？

基本上我们都是优先使用 useEffect，因为它更加灵活且不阻塞渲染。useLayoutEffect 应该只在需要同步读取DOM信息并立即重渲染时使用，比如动态调整子元素的大小。

性能考虑

• useEffect 会在组件更新后异步执行，这意味着它不会阻塞浏览器的绘制过程。
• useLayoutEffect 会同步执行，这在DOM更新后立即执行副作用时非常有用，但可能会导致性能问题。

ok这样我们就了解了useLayoutEffect和useEffect的区别了，合理使用的话就可以优化我们的项目。

我的微信公众号： 梨的前端小屋