react navigation 5中如何替代willFocus实现页面聚焦前数据预拉取？

你观察到的willFocus事件消失，本质是v5对导航生命周期做了重构，把原来分立的willFocus/didFocus逻辑拆分到了不同的执行层，并非完全移除了前置触发的能力。你遇到的componentDidMount无法满足需求的核心原因是：这个生命周期只在组件第一次挂载时执行一次，而导航栈内的保活页在二次返回时不会重新触发挂载，自然没法完成重复进入时的前置数据拉取。

核心时机认知 #

先把导航流程的触发顺序理清楚，避免用错事件导致时机滞后：

• 用户触发导航动作（比如点击跳转、从其他页返回、Tab切换）
• 系统判定目标页即将激活：这就是旧版v4willFocus对应的触发节点
• 屏幕转场动画启动
• 页面完全进入可交互状态：这是v5中focus事件的实际触发节点

所有需要“聚焦前完成拉取”的逻辑，都必须挂在步骤2的节点上，绝对不能放在步骤4的focus回调里——后者触发时用户已经看到页面了，根本达不到前置拉取的效果。

分场景实现代码 #

函数组件场景 #

直接用官方提供的useFocusEffect即可，这个Hook的执行节点完全对齐旧版willFocus：不管是第一次进入页面、还是二次从导航栈返回、还是Tab切回，只要系统判定要展示当前页，就会在步骤2的节点提前执行回调，不会等页面完全focus完再跑。

注意：这个Hook内部是通过useLayoutEffect阶段执行回调的，不会等到页面绘制完成、用户看到内容之后才跑，完全可以达到“聚焦前发请求”的效果，和v4的willFocus用户感知完全一致。

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

export default function ArticleDetailScreen() {
  useFocusEffect(
    useCallback(() => {
      // 这里就是聚焦前的执行时机，直接写数据拉取逻辑即可
      loadArticleDetail();
    }, [])
  );

  return <View>{/* 页面内容 */}</View>
}

类组件场景 #

类组件无法直接使用Hook，需要手动在组件内订阅导航状态变化，在判定页面即将激活的节点触发拉取，同时注意组件卸载时取消订阅避免内存泄漏：

import React from 'react';

class ArticleDetailScreen extends React.Component {
  componentDidMount() {
    // 订阅导航状态变化，在页面即将激活的节点触发逻辑
    this.removeStateListener = this.props.navigation.addListener('state', () => {
      // 确认当前页面处于激活流程中，直接拉取数据
      if (this.props.navigation.isFocused()) {
        this.loadArticleDetail();
      }
    })
  }

  componentWillUnmount() {
    // 页面卸载时清理订阅
    this.removeStateListener();
  }

  loadArticleDetail = () => {
    // 你的数据拉取逻辑
  }

  render() {
    return <View>{/* 页面内容 */}</View>
  }
}

极致优化的补充思路 #

如果需要比“即将激活节点”更早的拉取时机（比转场动画启动还早），可以在导航动作的发起端提前触发请求：比如用户点击按钮要跳转目标页时，在调用navigate()方法的同时就把目标页需要的接口请求发出去，等目标页渲染完成时，请求大概率已经返回，完全不会出现空屏加载的情况。

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