Expo Router嵌套导航中useEffect重复调用问题求助

核心原因与针对性解决方案 #

1. 用useFocusEffect替代useEffect并控制执行次数 #

在Expo Router的Tab导航场景中，从模态页返回时，Tab页面可能不会完全卸载但会重新获得焦点。即便你的useEffect依赖为空数组，某些导航逻辑也可能触发组件的二次挂载。使用Expo Router原生的useFocusEffect结合useRef可以精准控制逻辑仅执行一次：

import { useFocusEffect } from 'expo-router';
import { useRef } from 'react';

export default React.memo(function Index() {
  const hasRun = useRef(false);

  useFocusEffect(
    React.useCallback(() => {
      if (!hasRun.current) {
        console.log("index home");
        hasRun.current = true;
      }
    }, [])
  );

  // ... 其余组件代码
});

2. 排查AuthProvider的无意义重渲染 #

根布局包裹的AuthProvider如果内部状态（如登录状态）在登录后或模态页关闭时发生不必要的更新，会导致整个子组件树重新渲染。可以给AuthProvider添加React.memo优化，或检查状态更新的触发条件：

const AuthProvider = React.memo(({ children }) => {
  // ... 你的鉴权逻辑
  return <>{children}</>;
});

3. 调整模态页的关闭方式与路由结构 #

当前place模态页直接挂载在根Stack下，关闭时可能触发根Stack的状态变化，间接导致Tab页面重新挂载。建议使用router.dismiss()替代router.back()关闭模态页，这更符合模态页的生命周期逻辑：

// 关闭place模态页时调用
router.dismiss();

4. 优化TabBarIcon组件的渲染性能 #

如果TabBarIcon组件未做缓存优化，每次Tab切换时都会创建新实例，可能引发Tab页面的重新渲染。给TabBarIcon添加React.memo包裹：

const TabBarIcon = React.memo(({ focused, iconName, labelname, customSize }) => {
  // ... 你的图标渲染逻辑
});

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