React useEffect()延迟执行之谜揭秘

2024-02-06 11:12:47

在React应用中，useEffect()是用于处理副作用的Hook之一，例如数据获取、订阅或手动更改DOM。然而，在某些情况下，开发者可能会发现useEffect()的执行并非如预期般即时，而是出现了延迟。本文将深入探讨这个问题，并提供解决方案。

useEffect() 延迟执行的原因

首先理解为什么useEffect()会出现延迟执行的问题，需要从React组件生命周期入手。在函数组件中，每当状态或属性变化时，React会重新渲染组件。useEffect()会在每次组件更新后立即调用，默认情况下也会在初次挂载完成后调用。

但是，React调度副作用执行的时间点是在浏览器绘制屏幕之前，也就是在浏览器事件循环的“微任务阶段”。这意味着useEffect()不会即时执行，它会被安排在当前JavaScript执行堆栈清空之后、浏览器开始重新渲染页面之前的一个时间点运行。因此，从开发者角度观察，这种操作就显得像是有延迟。

解决方案一：调整依赖数组

确保副作用能够及时响应状态或属性的变化，可以将影响副作用的变量放入useEffect()第二个参数——依赖数组中。这样，每当这些变量发生变化时，useEffect()就会重新执行。

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

function Example() {
  const [count, setCount] = useState(0);

  // 仅在 count 变化时运行的副作用：
  useEffect(() => {
    document.title = `点击了 ${count} 次`;
  }, [count]); // 当依赖数组中指定变量发生变化，才执行该函数

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  );
}

解决方案二：使用useLayoutEffect()替代

为了确保副作用在浏览器重新绘制前执行，可以考虑使用useLayoutEffect()。该Hook的工作机制与useEffect()相似，但是它会在所有的DOM更改完成后、但在浏览器进行布局或绘制之前同步调用。

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

function LayoutExample() {
  const [width, setWidth] = useState(100);

  // 在重新渲染后立即执行副作用，但要在浏览器更新屏幕之前：
  useLayoutEffect(() => {
    document.getElementById('box').style.width = `${width}px`;
  });

  return (
    <div>
      <button onClick={() => setWidth(width + 10)}>
        增加宽度
      </button>
      <div id="box" style={{ height: '50px', backgroundColor: 'blue' }}></div>
    </div>
  );
}

解决方案三：异步操作的处理

如果useEffect()内部包含需要长时间运行的操作，如API调用，这可能会导致用户体验下降。在执行异步操作时，建议使用返回函数来清理副作用。

import React, { useEffect } from 'react';

function NetworkExample() {
  useEffect(() => {
    function fetchData() {
      // 模拟网络请求的延迟
      setTimeout(() => console.log('数据已加载'), 2000);
    }
    
    fetchData();
  
    return () => {
      // 清理副作用，例如取消异步操作等。
    };
  }, []);

  return <div>正在加载数据...</div>;
}