当我从其他屏幕导航到初始路线时，为什么 componentDidMount 不执行？答案

【问题标题】：Why does componentDidMount not execute when I navigate to initial route from other screen?当我从其他屏幕导航到初始路线时，为什么 componentDidMount 不执行？
【发布时间】：2019-06-01 18:10:45
【问题描述】：

我正在为我的移动应用程序使用 react-navigation，我有 2 条路线 - Home 和 Favoriti，其中 Home 是初始路线。这两个组件都有 componentDidMount。每当我从 Home 导航到 Favoriti 时，Favoriti 组件就会挂载，但是当我导航回 Home 时，它的 componentDidMount 不会执行。它仅在我第一次打开应用程序时执行，但每次导航到它时都需要安装它。

import { createStackNavigator, createAppContainer} from 'react-navigation';
import  Home  from './views/Home';
import Favoriti from './views/Favoriti';

const MainNavigator = createStackNavigator({

    FavoritiRT: Favoriti,
    HomeRT: Home
  },
  {
    initialRouteName: "HomeRT"
  }
);

const MyRoutes = createAppContainer(MainNavigator);

export default MyRoutes;

没有显示错误，只是初始路由的componentDidMount在我每次导航到它时都不会执行，但对于其他路由它会执行。

【问题讨论】：

标签： javascript react-native navigation react-native-android android-lifecycle

【解决方案1】：

“componentDidMount”不会再次运行，因为“Home”组件已经创建并且只要它在堆栈中就会继续存在。 Home 组件的该实例将被重用，并且当用户返回该 Home 组件时，他们将继续他们离开的地方。要再次运行 componentDidMount，您需要启动 Home 组件的新实例。

而不是使用后退按钮。创建一个按钮并在 onPress 属性中使用 push 方法导航到 Home 的新实例。

<Button
  title="Home"
  onPress={() => this.props.navigation.push('Home')}
/>

https://reactnavigation.org/docs/en/navigating.html#going-back

编辑：

虽然这会让您的应用暂时运行； sfratini 提出了一个很好的观点，如果您最终为公司/客户工作或发布自己的应用程序，他的回答对您来说会更好。出于他所说的所有原因，添加一个监听器将是理想的。

【讨论】：

【解决方案2】：

雷蒙德的答案应该有效，解释是一样的。 ComponentDidMount 只运行一次，不需要再次运行，因为您的堆栈中有 Home。

我建议在 componentWillReceiveProps 上添加一个侦听器，当主屏幕再次加载时，它也会触发，您可以查看是否需要刷新或重新加载屏幕。

当然，这取决于您的用例。如果您继续将主屏幕推送到堆栈上，唯一的缩小是一旦用户到达主页，通常后退按钮应该意味着“离开应用程序”，如果您将其推送到堆栈并按下返回，您就会离开返回一屏。那样是糟糕的用户体验，但如果 taht 适合你，那很好。

【讨论】：

感谢您的回答。我尝试添加一个侦听器，但是当我返回主屏幕时 componentWillReceiveProps 不会触发。使用替换而不是导航对我有用。