React Native使用react-navigation时组件重渲染及componentDidMount重复触发问题

这确实是个很影响性能的常见问题，我之前在项目里也踩过类似的坑！咱们先理清楚根源：当你用组件的navigate属性跳转页面时，默认的导航逻辑会把旧组件的实例销毁、从DOM中卸载；等你返回之前的页面时，又会重新创建组件实例，这就导致componentDidMount被重复调用，那些原本只需要执行一次的初始化逻辑（比如数据请求、复杂DOM操作）反复运行，自然会让应用变慢。

下面给你几个实用的解决思路：

• 替换生命周期逻辑，聚焦页面活跃状态
  如果你用的是类组件，可以监听页面的焦点事件，只在页面真正处于活跃状态时执行初始化逻辑，而不是依赖componentDidMount。比如在React Navigation里可以这么写：

  componentDidMount() {
    // 监听页面聚焦事件
    this.focusListener = this.props.navigation.addListener('focus', () => {
      // 把原本在componentDidMount里的逻辑移到这里，比如请求仪表盘数据
      this.loadDashboardData();
    });
  }
  
  componentWillUnmount() {
    // 记得移除监听，避免内存泄漏
    this.focusListener?.remove();
  }
  

  如果是函数组件，直接用useFocusEffect钩子会更方便，它只会在页面聚焦时触发，完美替代重复的componentDidMount。

• 禁用页面失焦时的卸载（按需使用）
  很多导航库支持配置页面在离开时不卸载，比如React Navigation中给目标页面的Screen组件设置unmountOnBlur: false：

  <Stack.Screen
    name="Dashboard"
    component={DashboardComponent}
    options={{ unmountOnBlur: false }}
  />
  

  这样仪表盘组件会一直保存在内存中，返回时不会重新挂载，componentDidMount也只会执行一次。但要注意别滥用这个配置，太多常驻内存的页面会增加应用的内存占用。

• 缓存核心数据/状态
  如果不想修改组件的挂载逻辑，可以把需要重复加载的数据缓存起来——比如用全局状态管理工具（像Redux、Zustand），或者本地缓存（localStorage、sessionStorage）。这样就算组件重新挂载，也能直接读取缓存好的数据，不用再重复发起网络请求，能大幅提升页面回退时的加载速度。

核心思路其实就是：要么减少不必要的组件重复挂载，要么复用已有的数据/状态，避免重复执行耗时的初始化操作。

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