如何在每次路线变更时调用"componentDidMount"或等效人员？

Question

目前，每次我尝试进入新路线时，我都会尝试调用componentDidMount。 但是当我更改路由然后返回到原始组件时，它不会再次调用cdm。

有什么办法可以做到这一点吗？

如有必要，可以发布代码，但我只想知道如何在每次路由更改时调用某些内容，因为历史上我会使用componentDidMount

顺便说一下，这是针对 React 本机navigation，因为我知道这种方式在普通 React 中有效

Answer 1

您可以订阅 react 导航的焦点事件，并在导航到相关路线时执行您需要执行的任何操作。

有关如何订阅的文档可以在 react 导航 api 参考中找到：

• https://reactnavigation.org/docs/en/navigation-events.html
• https://reactnavigation.org/docs/en/navigation-prop.html)

Answer 2

我最近遇到了类似的问题。就我而言，我认为问题主要集中在使用 React Native 的堆栈导航安装组件上。componentDidMount 只会在堆栈上调用一次，并且在您离开堆栈并返回堆栈之前不会重新渲染。我将解决问题的方法放在下面：

/** 
* @issue page does not refresh if its already been mounted on the navigation stack
* @todo  listen to navigation events, and trigger refresh
* @todo  get rid of componentDidMount, and instead 
*        have the navigation event handler trigger the refresh

所以基本上，当您导航到给定页面时，不要使用componenDidMount()，传递某种类型的导航参数，让页面知道它需要更新。

navigate('ExamplePage', { example: '<new Example>' })}

和ExamplePage

componentWillReceiveProps(nextProps) {
if (nextProps.navigation.state.params.example) {
this.props.retrieveData(this.props.example);
}
}

编辑/更新作为另一种选择，在我看来是一个更好的解决方案，您可以收听导航事件。这是文档，尽管它不是很深入 https://reactnavigation.org/docs/en/navigation-events.html

因此，就我而言，我仍然会收听从上一个屏幕上的navigate传入的导航参数。然后通过在下面添加此代码，我将刷新函数添加到onDidFocus，每次页面出现在屏幕上时都会触发。

import {NavigationEvents} from 'react-navigation';

render() {
return (
...
<NavigationEvents onDidFocus={() => this._refresh()} />
...
)
}

使用此解决方案，您仍然可以最初调用componentDidMount()。而且您不必使用componentWillReceiveProps因为这是一种不好的做法