解释 React Native 中 componentDidMount 和 componentWillUnmount 的作用

题目

解释 React Native 中 componentDidMount 和 componentWillUnmount 的作用

信息

• 类型：问答
• 难度：⭐

考点

组件生命周期,副作用处理,资源清理

快速回答

这两个是 React Native 类组件的生命周期方法：

• componentDidMount：组件首次渲染完成后触发，适合执行初始化操作（如网络请求、事件监听）
• componentWillUnmount：组件销毁前触发，用于清理资源（如取消网络请求、移除事件监听）

函数组件中对应使用 useEffect 钩子实现相同功能。

解析

1. 生命周期方法概述

React Native 类组件提供生命周期方法，允许开发者在特定阶段执行代码。核心阶段包括挂载（Mounting）、更新（Updating）和卸载（Unmounting）。

2. componentDidMount 详解

触发时机：组件首次插入 DOM 树后立即调用（一次）
主要用途：

• 发起网络请求获取数据
• 设置事件监听（如 BackHandler、键盘事件）
• 初始化第三方库
• 操作 DOM 或布局（通过 ref）

代码示例：

class UserProfile extends React.Component {
  componentDidMount() {
    // 示例1：获取数据
    fetch('https://api.example.com/user')
      .then(response => response.json())
      .then(data => this.setState({ userData: data }));

    // 示例2：添加事件监听
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this._handleKeyboardShow
    );
  }

  _handleKeyboardShow = () => { /* 处理逻辑 */ };
}

最佳实践：

• 避免在此处直接调用 setState 同步更新状态（可能触发额外渲染）
• 异步操作需处理错误（添加 catch 块）

3. componentWillUnmount 详解

触发时机：组件从 DOM 移除前调用（一次）
主要用途：

• 取消未完成的网络请求（防止更新已卸载组件）
• 移除事件监听（避免内存泄漏）
• 清理定时器（setInterval/setTimeout）
• 释放第三方库资源

代码示例：

class UserProfile extends React.Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('定时任务');
    }, 1000);
  }

  componentWillUnmount() {
    // 清理定时器
    clearInterval(this.timer);

    // 移除事件监听
    this.keyboardDidShowListener?.remove();
  }
}

常见错误：

• 忘记移除监听导致内存泄漏（应用卡顿/崩溃）
• 未取消网络请求导致 setState 更新已销毁组件（报错：Can't perform a React state update on an unmounted component）

4. 函数组件的等价实现

使用 useEffect 钩子替代：

function UserProfile() {
  useEffect(() => {
    // componentDidMount 逻辑
    const timer = setInterval(() => {}, 1000);

    // 返回清理函数（等价于 componentWillUnmount）
    return () => {
      clearInterval(timer);
    };
  }, []); // 空依赖数组确保只运行一次
}

5. 扩展知识

• 其他生命周期方法：shouldComponentUpdate（性能优化）、componentDidUpdate（响应 props/state 变化）
• 函数组件依赖项：useEffect 的第二个参数控制执行条件
• 常见内存泄漏场景：未清理的 WebSocket 连接、未卸载的导航监听器