React 清除副作用

最新推荐文章于 2024-10-09 21:26:04 发布

猪猪侠GG

最新推荐文章于 2024-10-09 21:26:04 发布

阅读量381

点赞数 4

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_40595376/article/details/142796240

版权

React 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在 React 中，useEffect 不仅用于执行副作用，还可以返回一个清理函数，用来清除副作用。清理副作用通常用于避免内存泄漏或不必要的操作，比如清除定时器、取消网络请求、移除事件监听器等。

清除副作用的时机：

组件卸载时：当组件从 DOM 中移除时，React 会调用 useEffect 中的清理函数。
依赖项变化时：当 useEffect 的依赖项发生变化时，React 会先执行当前副作用的清理函数，然后再运行新的副作用。

1. 基本用法

在 useEffect 中返回一个函数，该函数就是清理副作用的逻辑。当组件卸载或副作用重新运行时，React 会调用这个返回的函数。

示例：设置和清除定时器

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 清理副作用：清除定时器
    return () => {
      clearInterval(timer);
      console.log('清理定时器');
    };
  }, []); // 空依赖数组，表示副作用只在组件挂载时执行一次

  return <h1>计数: {count}</h1>;
}

export default TimerComponent;

解释：

副作用：我们在 useEffect 中创建了一个 setInterval 定时器，每秒钟更新一次计数值。
清理函数：返回的函数会在组件卸载时调用，使用 clearInterval 来清除定时器，防止组件卸载后定时器继续运行。

2. 依赖项变化时的清理

如果 useEffect 依赖于某些状态，当状态发生变化时，React 会先执行副作用的清理函数，然后再执行更新后的副作用。

示例：监听窗口大小变化

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

function WindowSizeComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // 清理副作用：移除事件监听器
    return () => {
      window.removeEventListener('resize', handleResize);
      console.log('移除 resize 事件监听器');
    };
  }, []); // 空数组，表示只在组件挂载时设置监听器

  return <div>窗口宽度：{windowWidth}</div>;
}

export default WindowSizeComponent;

解释：

副作用：在组件挂载时，我们添加了 resize 事件监听器，监听窗口大小的变化。
清理函数：在组件卸载时移除事件监听器，防止内存泄漏。如果窗口尺寸变化了，React 会重新执行 useEffect，并在此之前移除旧的事件监听器。

3. 依赖项变化时的清理与重新执行

当 useEffect 的依赖项变化时，React 会先调用清理函数，然后再执行新的副作用。

示例：依赖项变化时的清理

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

function TimerWithDependency() {
  const [count, setCount] = useState(0);
  const [intervalMs, setIntervalMs] = useState(1000);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, intervalMs);

    // 清理定时器
    return () => {
      clearInterval(timer);
      console.log('定时器清除');
    };
  }, [intervalMs]); // 当 intervalMs 变化时，重新设置定时器

  return (
    <div>
      <h1>计数: {count}</h1>
      <button onClick={() => setIntervalMs(500)}>加快</button>
      <button onClick={() => setIntervalMs(2000)}>减慢</button>
    </div>
  );
}

export default TimerWithDependency;

解释：

副作用：根据 intervalMs 设置一个 setInterval 定时器，定时更新计数。
清理函数：每次 intervalMs 改变时，清除旧的定时器，并创建一个新的定时器。
依赖项：当 intervalMs 发生变化时，useEffect 会重新执行，更新定时器的间隔时间。

4. 组件卸载时的清理

有时副作用在组件卸载时需要进行彻底清理，例如取消网络请求或移除订阅。这种情况下，无论依赖项是否变化，组件卸载时都会执行清理函数。

示例：模拟订阅和取消

import React, { useEffect } from 'react';

function SubscriptionComponent() {
  useEffect(() => {
    const subscribe = () => {
      console.log('订阅成功');
    };

    const unsubscribe = () => {
      console.log('取消订阅');
    };

    subscribe();

    // 清理函数
    return () => {
      unsubscribe();
    };
  }, []); // 只在组件挂载时订阅，卸载时取消订阅

  return <div>正在订阅...</div>;
}

export default SubscriptionComponent;