React Native导航传参最佳实践：传ID还是JSON对象？

方案1：传递客户ID，详情页调用API获取数据 #

• 优势：
  • 数据一致性有保障：详情页直接拉取服务端最新数据，不会因为列表页缓存或后台数据更新导致展示过时信息
  • 内存开销极低：仅传递一个轻量的ID（数字/短字符串），不会给导航栈增加额外内存负担，也不会触发序列化/反序列化的性能损耗
  • 兼容性拉满：在React Navigation等主流导航库中，基础类型参数的传递几乎不会出现异常，完全不用担心参数过大导致的传参失败问题
• 劣势：
  • 多一次网络请求：弱网环境下可能会有短暂的加载等待，需要处理加载状态和请求失败的情况

方案2：直接传递完整Client JSON对象 #

• 优势：
  • 页面加载更快：无需额外请求，详情页可以直接使用传入的数据，用户体验更流畅
  • 代码逻辑更简单：省去了详情页的API请求、状态管理等代码，开发效率更高
• 劣势：
  • 数据一致性风险高：如果列表页的数据是缓存的旧数据，详情页展示的信息就会和后台不一致，用户可能看到过期内容
  • 性能与稳定性隐患：如果Client对象体积较大（比如包含大量嵌套字段），序列化/反序列化过程会消耗额外性能，甚至可能超出导航库的参数大小限制导致传参失败；同时导航栈会保留对象副本，增加内存占用
  • 状态同步麻烦：若用户在详情页修改了客户信息，需要手动同步回列表页，很容易出现状态不一致的情况

性能与最佳实践推荐 #

优先选择传递客户ID，详情页调用API获取数据，原因如下：

1. 数据可靠性优先：绝大多数业务场景中，展示最新的客户信息比少一次请求更关键，尤其是涉及数据修改的场景，能有效避免用户看到过时数据
2. 长期可维护性更强：数据流向单一（从服务端到详情页），后续修改API字段或业务逻辑时，不需要同步调整导航传参的结构，降低维护成本
3. 性能风险更可控：虽然多一次请求，但可以通过请求缓存、添加加载UI等方式弱化延迟影响；而传递大对象带来的内存、序列化问题，会随着业务复杂度提升逐渐凸显，排查和修复成本更高

如果是纯展示、无数据更新的简单场景，且Client对象体积很小，也可以临时采用传递完整对象的方案，但必须评估数据过期的风险，比如可以在页面可见时检查是否需要刷新数据。

内容的提问来源于stack exchange，提问作者Andrea Verrecchia