React Native：在导航到屏幕之前还是之后开始加载屏幕资源更好？

Question

在我的 React Native 应用程序中，我有一个 screenA，它有一个按钮可以将我带到 screenB。 screenB 需要必须通过 API 调用从服务器获取的数据（this.props.fetchData(param1, param2)。我在screenA 上有param1 和param2。

现在，我这样做的方式是将param1 和param2 作为导航参数从screenA 传递到screenB，然后当screenB 挂载时，我调用this.props.fetchData。

所以我的代码是：

屏幕A

this.props.navigation.navigate('screenB', {param1, param2});

屏幕B

componentDidMount() {
  this.props.fetchData(this.props.navigation.state.params.param1, this.props.navigation.state.params.param2);
}

我想知道的：

是否有任何理由从screenA 调用this.props.fetchData()？资源保存在 Redux 存储中，因此无论我从哪里加载它们都可以从 screenB 访问。我的代码如下所示：

屏幕A

this.props.fetchData(param1, param2);
this.props.navigation.navigate('screenB', {param1, param2});

屏幕B

<nothing>

我可以想象到的好处是，由于导航到 screenB 需要有限的时间，如果我在导航到它之前开始加载资源，用户就不必等待很长时间screenB 在资源加载之前。 缺点是，如果导航到 screenB 的调用不起作用，资源将被加载。

有人知道选择一种方法而不是另一种方法的任何理由吗？

Answer 1

我不会让导航导航方法依赖于 API 调用。最重要的商店将在初始应用启动时加载。如果您直接在屏幕 a 的开头加载屏幕 b 的数据怎么办？如果数据可以通过 Redux 获得，那么我不喜欢通过导航传递参数。

Answer 2

我看到在屏幕 A 上调用 API 时可能会出现一些缺点：

1. 如果屏幕 B 从另一个屏幕 C 打开，那么在这种情况下，您必须再次在屏幕 C 上执行 API 调用并传递数据。
2. 如果由于某种原因由于互联网连接速度慢，API 需要很长时间，那么它可能会在屏幕 B 上显示一段时间不正确的状态，并可能稍后更新它。
3. 屏幕 A 可能会在导航时卸载，而 API 调用正在进行中，在这种情况下，由于屏幕 A 已经卸载，您可能永远无法在屏幕 B 上获得更新的道具。

您可能会发现，如果这些场景适合您，那么您可以继续在屏幕 A 上调用 API 的方法。