在 React Native 中，当用户通过导航跳转到新页面时，需在组件“获得焦点但尚未渲染完成”阶段执行数据获取等操作，navigation.addListener('focus') 是最可靠且符合生命周期语义的解决方案。
在 react native 中，当用户通过导航跳转到新页面时，需在组件“获得焦点但尚未渲染完成”阶段执行数据获取等操作，`navigation.addlistener('focus')` 是最可靠且符合生命周期语义的解决方案。
在 React Native 使用 React Navigation 构建的多屏应用（如带 Tab 和 Stack 导航的聊天 App）中，一个常见需求是：当用户点击进入 MessagesScreen 时，在界面真正渲染前就发起数据请求（例如根据 chatId 拉取最新消息）。此时，不能依赖 useEffect 的默认挂载时机（即组件首次渲染后），因为该时机可能早于导航完成；也不能使用 blur 或 beforeRemove 等无关事件——关键在于捕获“屏幕即将可见”的精确时刻。
React Navigation 提供了标准化的导航生命周期事件，其中 'focus' 事件正是为此场景设计：它在屏幕成为当前活跃栈顶页面、且即将参与渲染流程时触发（早于首次 render，但确保导航已提交、路由参数已就绪）。相比 useFocusEffect（其内部也基于 focus 事件），手动监听 focus 提供更明确的控制权和更可预测的执行时序。
✅ 正确实现方式如下：
import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
function MessagesScreen() {
const navigation = useNavigation();
const route = useRoute();
const { chatId } = route.params as { chatId: string };
React.useEffect(() => {
// ✅ 在 focus 事件触发时立即执行业务逻辑
const unsubscribe = navigation.addListener('focus', () => {
console.log('[MessagesScreen] focused — fetching messages for chat:', chatId);
// 示例：触发数据获取（可配合 React Query、Redux Toolkit Query 或自定义 hook）
fetchMessages(chatId).then(messages => {
// 更新状态或触发 re-render
});
});
// ? 自动清理：组件卸载或失焦时移除监听器（React Navigation 会自动处理，但仍建议显式返回）
return unsubscribe;
}, [navigation, chatId]); // 注意：chatId 必须加入依赖数组，确保参数变更后重新监听
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages for chat {chatId}</Text>
{/* 实际项目中此处可展示加载态或消息列表 */}
</View>
);
}
// 模拟异步数据获取
async function fetchMessages(chatId: string): Promise<any[]> {
return new Promise(resolve =>
setTimeout(() => resolve([{ id: '1', text: 'Hello!' }]), 800)
);
}
export default MessagesScreen;⚠️ 重要注意事项：
- 不要用 useEffect 空依赖数组模拟“挂载后执行”：useEffect(() => {}, []) 在组件首次创建时运行，此时 route.params 可能尚未稳定（尤其在快速导航或深层链接场景下），导致 chatId 为 undefined。
- 避免滥用 useFocusEffect：虽然它语法更简洁（useFocusEffect(useCallback(() => { ... }, []))），但其回调会在每次 focus 时执行，且不支持动态依赖更新（如 chatId 变化后需重新 fetch）；而手动 addListener 更灵活、可读性更强。
- 务必传递 [navigation, chatId] 作为 useEffect 依赖：确保 chatId 变更（如从聊天列表切换不同会话）时，能及时重新绑定事件并执行新逻辑。
- focus 不等于 componentDidMount：它是导航层级的事件，与组件实例生命周期解耦——即使组件被复用（如 Tab 切换），只要再次获得焦点就会触发，符合预期行为。
总结：在 React Native 中响应“导航完成、渲染之前”的时机，应统一采用 navigation.addListener('focus')。它精准匹配 UX 流程（用户意图已明确、界面即将呈现），兼顾可靠性与可维护性，是构建响应式、高性能导航体验的核心实践。
