React Native组件生命周期：屏幕可见时触发哪个函数？

我之前也碰到过一模一样的困扰！确实TabNavigator在应用初始化时会预渲染所有标签页，导致所有页面的componentDidMount一次性都执行了，完全没法实现“切换到对应屏幕时再执行逻辑”的需求。不过React Navigation其实提供了专门的解决方案，不用再用临时方法凑活啦：

类组件方案：监听focus事件 #

如果你用的是类组件，可以通过导航对象的addListener方法监听focus事件，这个事件会在屏幕被切换到（变为可见状态）时触发：

class MyTabScreen extends Component {
  componentDidMount() {
    // 注册focus事件监听
    this.focusSubscription = this.props.navigation.addListener('focus', () => {
      // 这里写屏幕可见时需要执行的逻辑
      console.log('当前标签页已可见！');
      // 比如重新拉取数据、更新页面状态等操作
    });
  }

  componentWillUnmount() {
    // 记得在组件卸载时移除监听，避免内存泄漏
    this.focusSubscription();
  }

  render() {
    return (
      // 你的组件渲染内容
    );
  }
}

函数组件方案：使用useFocusEffect钩子 #

如果是函数组件，React Navigation提供了更便捷的useFocusEffect钩子，专门用来处理屏幕聚焦时的逻辑，还自带清理机制：

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

function MyTabScreen() {
  useFocusEffect(
    React.useCallback(() => {
      // 屏幕变为可见时执行的逻辑
      console.log('当前标签页已聚焦！');
      
      // 返回的函数会在屏幕失去焦点时执行，用于清理操作
      return () => {
        console.log('当前标签页已失去焦点，执行清理');
      };
    }, []) // 这里可以添加依赖项，当依赖变化时会重新创建监听
  );

  return (
    // 你的组件渲染内容
  );
}

不管是哪种方案，focus事件都会在每次屏幕被切换到的时候触发——不管是第一次进入还是从其他标签页切回来，完全符合你想要的“屏幕可见时调用函数”的需求。

内容的提问来源于stack exchange，提问作者SwimmingG