componentWillUnmount()

componentWillUnmount 是 React 类组件中的一个生命周期方法，它在组件从 DOM 中移除之前调用。这个方法是清理组件资源的绝佳时机，例如清除定时器、取消网络请求、移除事件监听器等。确保正确使用 componentWillUnmount 可以帮助避免内存泄漏和其他潜在问题。

方法签名

componentWillUnmount();

这个方法没有任何参数，并且是在组件即将被卸载和销毁时调用的。

使用场景

清除定时器或动画

如果你在组件中设置了定时器（如 setInterval 或 setTimeout），你应该在组件卸载时清除它们，以防止内存泄漏或不必要的执行。

class TimerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState((state) => ({ seconds: state.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    // 清除定时器
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

取消未完成的网络请求

如果组件发起了网络请求并且有可能在请求完成前卸载，你应该取消这些请求以避免处理不再需要的数据。

class DataFetchingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.isCancelled = false;
  }

  fetchData = () => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((data) => !this.isCancelled && this.setState({ data }))
      .catch((error) => console.error("Error fetching data:", error));
  };

  componentDidMount() {
    this.fetchData();
  }

  componentWillUnmount() {
    // 标记请求为已取消
    this.isCancelled = true;
  }

  render() {
    // 渲染逻辑...
  }
}

移除事件监听器

如果你在组件中添加了全局事件监听器（如窗口大小变化、键盘事件等），你应该在组件卸载时移除它们。

class WindowSizeListener extends React.Component {
  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
  }

  componentWillUnmount() {
    // 移除事件监听器
    window.removeEventListener("resize", this.handleResize);
  }

  handleResize = () => {
    console.log("Window resized");
  };

  render() {
    return <div>WindowSizeListener Component</div>;
  }
}

注意事项

1. 不要设置新的状态：在 componentWillUnmount 中不应该调用 setState 或其他导致更新的方法，因为此时组件已经处于卸载过程中，更新不会生效。
2. 清理副作用：确保所有在组件挂载期间启动的副作用（如网络请求、事件监听器、定时器等）都在这里得到适当的清理。
3. 幂等性：尽量使 componentWillUnmount 的操作是幂等的，即多次调用不会产生不同的结果。这有助于应对严格模式下的双重调用情况。

函数组件中的替代方案

对于函数组件，你可以使用 useEffect Hook 来实现类似的功能。useEffect 提供了一个返回值来定义清理逻辑，当组件卸载时会自动调用这个返回的函数。

import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    // 执行副作用操作
    const timer = setInterval(() => {
      console.log("This will run every second");
    }, 1000);

    // 返回一个清理函数
    return () => {
      // 清理定时器
      clearInterval(timer);
    };
  }, []); // 空数组表示仅在首次渲染后执行

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

export default MyComponent;

在这个例子中，useEffect 的清理函数会在组件卸载时自动调用，从而确保定时器被正确清除。

总结

通过理解 componentWillUnmount 的工作原理及其最佳实践，你可以更好地决定何时以及如何使用它来管理组件的清理逻辑。确保在组件卸载时正确地清理资源是构建健壮和高性能 React 应用程序的重要部分。