跨多个屏幕管理列表状态

Question

我正在 React Native 中制作一个移动应用程序原型，它应该能够通过以下方式使用列表：

例如，在登陆页面上，您有包含全套项目的完整列表概述，在子屏幕上，您应该能够看到一组特定的项目（假设只有偶数 ID 号），甚至可以更深入地进入一个屏幕堆栈用户应仅显示一项（具有特定 ID）。

现在我正在从 SQL 中获取第一个屏幕上的所有数据，并将其保存在状态中。当我需要进一步导航（React Stack Navigator）时，我会过滤状态并将带有过滤项的状态+ setState 传递到下一个屏幕，将其保存到状态（下一个屏幕相同）。 SQL lib 正在直接在每个屏幕上很好地处理将数据保存到数据库，但我最大的问题是在所有屏幕上维护响应式 UI，因为一个列表是另一个列表的子集 - 为此我正在更新子级内部的父级状态。

有更优雅的方式/模式吗？我正在考虑使用 Context，但不确定它是这里的最佳选择。列表组件是 Shopify 的 FlashList。

如果您也能推荐一本好的模式书/学习资源，我会很高兴。

非常感谢！

Answer 1

我建议使用正确的工具来完成正确的工作：

1. 上下文API

• 如果您的应用规模较小且不断增长，这对于简单应用或当您需要避免螺旋钻探时非常有用。
• 开发工具 - 有限
• 社区 - 高

2. Redux

• 如果您的应用程序变得更大。这对于状态可预测性和维护单一事实来源来说是最好的。
• 开发工具 - 优秀
• 社区 - 非常高

3. MobX 状态树（MST）

• 这是我个人最喜欢的，它是一种简单且更具反应性的方法。可用于需要简单状态更新而无需太多样板的应用程序。关于这个的很好的教程这里
• 开发工具 - 好
• 社区 - 媒介

4. X状态

• 这最适合具有复杂状态逻辑和转换的应用程序。它通过状态机提供清晰的状态管理。
• 开发工具 - 好
• 社区 - 仍在增长

希望这有帮助:)