React中componentWillUnmount组件的使用-CFANZ编程社区

在React中，组件卸载（Unmounting）阶段的生命周期方法。React中组件卸载阶段的正确方法是：

1. 类组件中的`componentWillUnmount`

在类组件中，componentWillUnmount方法会在组件卸载前被调用，通常用于清理操作（如移除事件监听器、清除定时器等）。

使用方法

class ExampleComponent extends React.Component {
  componentDidMount() {
    // 组件挂载后执行的操作，例如添加事件监听器
    this.timer = setInterval(() => {
      console.log('Component is mounted');
    }, 1000);
  }

  componentWillUnmount() {
    // 组件卸载前执行的操作，例如清除定时器
    clearInterval(this.timer);
    console.log('Component is about to unmount');
  }

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

2. 函数组件中的`useEffect`清理函数

在函数组件中，我们使用useEffect钩子来处理副作用，其返回的函数会在组件卸载时执行。

使用方法

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

function ExampleComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 组件挂载后执行
    console.log('Component mounted');
    
    // 设置定时器
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    
    // 清理函数，在组件卸载或重新渲染前执行
    return () => {
      clearInterval(timer);
      console.log('Component is unmounting');
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <p>Count: {count}</p>
      <p>This component will clean up its timer when unmounted</p>
    </div>
  );
}

完整组件

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

function UnmountExample() {
  const [show, setShow] = useState(true);
  
  // 模拟一个需要清理的定时器
  useEffect(() => {
    const timer = setTimeout(() => {
      console.log('This timer would have run if component stayed mounted');
    }, 3000);
    
    // 清理函数
    return () => {
      clearTimeout(timer);
      console.log('Component is unmounting - cleanup done');
    };
  }, []);
  
  return (
    <div>
      <h2>Unmounting Example</h2>
      <p>Component will automatically unmount after 2 seconds</p>
      {show && (
        <div>
          <p>This is the mounted component</p>
          <button onClick={() => setShow(false)}>Unmount Component</button>
        </div>
      )}
    </div>
  );
}

export default UnmountExample;