useEffect

return

useEffect 中的 return 语句中的函数会在组件卸载（销毁）时执行，用于清理副作用或取消订阅。这是 useEffect 的一个重要特性，用于确保在组件不再使用时清理资源，以防止内存泄漏和其他问题。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 创建一个定时器
    const timerId = setInterval(() => {
      console.log('Timer running...');
    }, 1000);

    // 在组件卸载时清理定时器
    return () => {
      clearInterval(timerId);
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

陷阱

1、陷阱一：以下代码会陷入死循环中

const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
});

2、陷阱二：没有依赖数组作为第二个参数，与依赖数组位空数组 [] 的行为是不一致的：

useEffect(() => {
  // 这里的代码会在每次渲染后执行
});

useEffect(() => {
  // 这里的代码只会在组件挂载后执行
}, []);

useEffect(() => {
  //这里的代码只会在每次渲染后，并且 a 或 b 的值与上次渲染不一致时执行
}, [a, b]);