React Native中useEffect清理函数执行顺序异常求助

问题原因 #

在React Native的Stack Navigator默认行为中，页面被推入导航栈后并不会立即卸载，仅处于失焦状态；同时React的批量更新机制会优先完成新页面的挂载逻辑（执行新页面的useEffect），再处理旧页面的状态变更，这就导致了你看到的清理函数执行顺序颠倒的情况。

解决方法 #

方法1：使用React Navigation专属的useFocusEffect（推荐） #

useFocusEffect是React Navigation提供的钩子，专门适配导航场景的生命周期，会在页面获得焦点时执行回调，失去焦点时执行清理函数，完全匹配你对页面进入/离开的逻辑预期。

修改page1的代码：

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

function page1() {
  useFocusEffect(
    useCallback(() => {
      console.log(1); // 进入page1/聚焦时执行

      return () => {
        console.log(2); // 离开page1/失焦时执行
      };
    }, [])
  );

  return (
    <Pressable onPress={() => navigation.navigate('page2')}>
      <Text>BUTTON</Text>
    </Pressable>
  );
}

方法2：开启页面失焦卸载配置 #

如果你需要严格依赖组件卸载时执行清理函数，可以在Stack Navigator的页面配置中开启unmountOnBlur: true，这样页面失焦时会立即被卸载，其useEffect的清理函数会在新页面挂载前执行，符合你预期的顺序。

修改导航栈配置：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="page1" 
        component={page1} 
        options={{ unmountOnBlur: true }} // 开启失焦卸载
      />
      <Stack.Screen name="page2" component={page2} />
    </Stack.Navigator>
  );
}

总结 #

• 优先选择useFocusEffect，它更贴合导航场景的生命周期逻辑，避免依赖组件挂载/卸载的不确定性。
• 若必须使用组件卸载逻辑，通过unmountOnBlur配置确保页面失焦时立即卸载，从而保证清理函数的执行顺序。

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