在 React Native 使用 React Navigation 时，需在组件“即将显示但尚未渲染完成”阶段触发数据获取等操作，推荐使用 navigation.addListener('focus') 配合 useEffect 实现精准、可靠的生命周期响应。
在 react native 使用 react navigation 时，需在组件“即将显示但尚未渲染完成”阶段触发数据获取等操作，推荐使用 `navigation.addlistener('focus')` 配合 `useeffect` 实现精准、可靠的生命周期响应。
在构建带标签页（Tab Navigator）和堆栈导航（Stack Navigator）的 React Native 应用时，一个常见需求是：当用户从 ChatsScreen 点击跳转到 MessagesScreen 后，立即执行初始化逻辑（如拉取聊天消息），且该逻辑必须在界面渲染前或首次可见时准确触发——而非依赖 useEffect 的默认挂载时机（可能因组件复用而失效）。
React Navigation 并未提供传统意义上的 “mounted before render” 钩子，但其内置的 导航生命周期事件 提供了更语义化、更可靠的替代方案：focus 事件。它会在屏幕即将成为当前焦点（即即将显示）时触发，完美契合“导航完成、渲染开始前”的业务场景。
✅ 正确实现方式：监听 focus 事件
import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
function MessagesScreen() {
const navigation = useNavigation();
const route = useRoute();
const { chatId } = route.params ?? {};
React.useEffect(() => {
// ✅ 在 focus 时执行初始化逻辑（如 API 请求）
const handleFocus = async () => {
if (!chatId) return;
try {
// 模拟数据获取
const messages = await fetchMessages(chatId);
console.log('Messages loaded:', messages);
// 更新状态或触发重渲染（例如通过 useState / Redux / Zustand）
} catch (err) {
console.error('Failed to load messages:', err);
}
};
// 监听 focus 事件
const unsubscribe = navigation.addListener('focus', handleFocus);
// ? 注意：务必返回取消订阅函数，避免内存泄漏
return unsubscribe;
}, [navigation, chatId]); // 依赖项需包含影响逻辑的关键变量
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages for chat ID: {chatId}</Text>
{/* 实际项目中可在此处添加加载状态或消息列表 */}
</View>
);
}
// 模拟异步请求（仅作示例）
async function fetchMessages(id: string): Promise<any[]> {
return new Promise(resolve =>
setTimeout(() => resolve([{ id: '1', text: 'Hello!' }]), 800)
);
}
export default MessagesScreen;⚠️ 关键注意事项
- 不要使用 useEffect 空依赖数组（[]）：在 Stack Navigator 中，MessagesScreen 可能被复用（例如返回再进入），此时 useEffect([]) 不会重新执行，导致数据不刷新。
- focus ≠ mount：focus 是导航级事件，与组件是否首次挂载无关，而是反映“是否成为当前活跃屏幕”，因此更符合业务意图。
- 务必清理监听器：addListener 返回的 unsubscribe 函数必须在 useEffect 清理函数中调用，否则会导致重复注册、内存泄漏或逻辑多次执行。
- 参数安全访问：使用 useRoute().params 获取导航参数时，请始终进行空值检查（如 ?? {}），避免因参数缺失导致崩溃。
- 性能考量：若需防抖/节流多次 focus（极少见），可在 handleFocus 内部自行实现；通常无需额外处理。
? 总结
navigation.addListener('focus') 是 React Navigation 官方推荐、稳定可靠的方式，用于响应“页面即将显示”这一关键时机。相比 componentDidMount 或 useEffect([])，它真正解耦了组件生命周期与导航状态，确保逻辑在每次进入屏幕时准确、可控地执行。掌握这一模式，是构建健壮、可维护的 React Native 导航体验的必备实践。
