useFocusEffect清理为何在跳转后新页面的useEffect之后执行？

你遇到的输出顺序属于React Navigation的正常设计。
React Navigation的路由切换流程中，新页面的挂载、渲染及挂载副作用（useEffect）执行优先级高于旧页面的失焦清理逻辑。当你触发跳转到Page2的动作后，框架会先完成Page2的全量挂载流程，触发Page2的空依赖useEffect打印3；等Page2完全获得焦点后，才会将Page1标记为失焦，此时才会执行useFocusEffect返回的清理函数打印2，因此默认输出顺序为1、3、2。

如果需要让原清理逻辑在Page2的useEffect之前触发，可以根据使用场景选择以下两种方案：

• 方案1：仅处理主动点击按钮跳转的场景，可直接把清理逻辑提前到跳转动作之前执行

const Page1 = () => {
  const { navigate } = useNavigation();

  // 把清理逻辑抽成独立函数复用
  const clearLogic = useCallback(() => {
    console.log('2');
  }, []);

  useFocusEffect(() => {
    console.log('1');
    return clearLogic;
  });

  return (
    <View>
      <Button 
        onPress={() => {
          // 跳转前先执行清理
          clearLogic();
          navigate('PAGE2');
        }} 
        title="Go to Page2" 
      />
    </View>
  );
};

• 方案2：需要覆盖所有离开页面的场景（包括手势返回、系统返回键、其他逻辑触发的页面离开），可监听路由的transitionStart事件，该事件在路由切换动作启动时触发，早于新页面的挂载流程：

const Page1 = () => {
  const { navigate, addListener } = useNavigation();

  useFocusEffect(() => {
    console.log('1');
  });

  useEffect(() => {
    const unsubscribe = addListener('transitionStart', () => {
      // 路由切换启动时执行清理逻辑
      console.log('2');
    });
    return unsubscribe;
  }, [addListener]);

  return (
    <View>
      <Button onPress={() => navigate('PAGE2')} title="Go to Page2" />
    </View>
  );
};

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