1. 前言

1. 碰巧今天面试 react,问到这个问题(useEffect 和 useLayoutEffect有啥区别),都在射程范围内,那就来捋一捋

2. 是什么 what

1. useEffect和 useLayoutEffect是 React 提供的两个副作用钩子函数，用于在函数式组件中处理副作用操作

3. useEffect:

1. useEffect 在组件渲染完成后执行，通常用于处理副作用操作，如数据获取、订阅事件、定时器等。
2. useEffect 的回调函数会在每次渲染结束后异步执行，不会阻塞浏览器的渲染过程。
3. useEffect 的回调函数可以返回一个清理函数，用于清除副作用操作，比如取消订阅、清除定时器等。
4. useEffect 的执行时机是在浏览器完成绘制后，对用户来说是不可见的。

4. useLayoutEffect:

1. useLayoutEffect 在组件渲染完成后，浏览器绘制之前执行，可以看作是 useEffect 的同步版本。
2. useLayoutEffect 的回调函数会在每次渲染结束后同步执行，会阻塞浏览器的渲染过程，可能导致页面性能下降。
3. useLayoutEffect 的回调函数也可以返回一个清理函数，用于清除副作用操作。
4. useLayoutEffect 的执行时机是在浏览器完成绘制前，对用户来说是可见的。

5. useEffect 与 useLayoutEffect 对比 demo

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

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

  useEffect(() => {
    console.log('useEffect');
    document.title = `Count: ${count}`;
  }, [count]);

  useLayoutEffect(() => {
    console.log('useLayoutEffect');
    // 模拟一个耗时操作
    for (let i = 0; i < 1000000000; i++) {
      // Do something
    }
    document.title = `Count: ${count}`;
  }, [count]);

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

export default Demo;

1. 先打印了 useEffect，然后是 useLayoutEffect。
2. 这是因为useLayoutEffect在更新 DOM 前同步执行，可能会导致页面渲染的卡顿。
3. 而 useEffect在页面渲染完成后异步执行，不会阻塞页面的渲染

6. 表格对比

• 虽然 useLayoutEffect 在某些情况下可能会导致页面性能下降，
  但它在某些特定的场景下是非常有用的，例如在需要准确获取元素尺寸、计算布局等情况下。
• 在大多数情况下，使用 useEffect 是更安全和更推荐的选择。

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉