React 中卸载阶段 (Unmounting) 的生命周期方法有哪些？

推荐答案

在 React 中，卸载阶段（Unmounting）的生命周期方法只有一个：

• componentWillUnmount()

本题详细解读

componentWillUnmount()

componentWillUnmount() 是 React 组件卸载阶段唯一的生命周期方法。它在组件从 DOM 中移除之前调用。这个方法通常用于执行一些清理操作，例如取消网络请求、清除定时器、移除事件监听器等，以防止内存泄漏。

使用场景

1. 取消网络请求：如果组件在挂载时发起了网络请求，可以在 componentWillUnmount() 中取消这些请求，以避免在组件卸载后仍然尝试更新状态。

2. 清除定时器：如果组件中设置了 setTimeout 或 setInterval，可以在 componentWillUnmount() 中清除这些定时器，防止它们在组件卸载后继续执行。

3. 移除事件监听器：如果组件中添加了事件监听器，可以在 componentWillUnmount() 中移除这些监听器，以避免在组件卸载后仍然触发事件处理函数。

示例代码

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    // 做一些操作
  }

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

在这个示例中，componentWillUnmount() 用于清除在 componentDidMount() 中设置的定时器，确保组件卸载时不会继续执行 tick() 方法。

注意事项

• componentWillUnmount() 是组件卸载前的最后一个生命周期方法，一旦组件被卸载，它将不再存在，因此在这个方法中不要尝试更新组件的状态或执行任何可能导致组件重新渲染的操作。
• 在函数组件中，可以使用 useEffect 的清理函数来模拟 componentWillUnmount() 的行为。