传递大数据时，React 堆栈导航转换花费的时间太长

Posted 2023-02-19

【中文标题】传递大数据时，React 堆栈导航转换花费的时间太长

【英文标题】：React stack navigation transition takes way too long when passing large data

【发布时间】：2020-03-08 01:03:14

【问题描述】：

我使用react naviagation 在不同屏幕之间导航，特别是堆栈导航器。我一直遇到一些导航转换时间过长的问题。这种延迟可能长达 4-5 秒。延迟的大小与我传递给navigate 函数的数据权重成正比。我已经尝试使用InteractionManager.runAfterInteractions 函数来加速离线加载，但这并没有帮助，因为离线加载本身似乎需要处理传递的数据，并且只有在那之后才会转换。

我在应用启动时就进行所有数据提取。因此，当我导航到另一个屏幕时，不再获取数据。目前，我能想到的唯一解决方法是使用 AsyncStorage 而不是在导航期间传递它。有人遇到过这个问题吗？如果是这样，你有没有设法解决它？

【问题讨论】：

如果要传递大量数据，最好使用 react Context 或像 redux 这样的状态管理库

【参考方案1】：

我最终将所有内容加载到 redux，然后只是从中读取，而不是通过导航包传递大量数据。作为另一种选择，我也可以使用 AsyncStorage，但这会被滥用，因为 AsyncStorage 的操作是异步的，这意味着我需要 await 才能获得所需的数据。毕竟，这不是 AsyncStorage 的设计目的。另一方面，Redux 操作是同步的，这使得在这种特殊情况下的生活变得轻松，其主要目的是满足这样的需求。