17、React Native 导航与状态管理：从数据共享到深度链接

React Native 导航与状态管理：从数据共享到深度链接

1. 屏幕间的状态共享

在开发多屏幕应用时，我们常常会遇到屏幕间数据共享的挑战。以一个具有联系人列表和收藏夹功能的应用为例，收藏夹页面和联系人页面使用的是同一联系人列表，但之前我们为每个页面都进行了一次 API 调用，导致列表被获取了两次。显然，更好的做法是只获取一次列表，并在屏幕间共享数据。

1.1 应用组件中定义数据

一种方法是在应用组件（App component）中定义所有数据，然后利用 React Navigation 为根标签导航器提供的 initialRouteParams 属性，将状态分配给初始路由（如联系人页面）。之后，我们可以通过导航参数将数据传递给其他屏幕，就像从联系人页面传递联系人信息到个人资料页面一样。

不过，这种维护状态的方法并不理想。因为每个屏幕都能访问应用中的所有数据，而且当某个屏幕中的状态发生变化时，可能需要重新渲染所有屏幕，这很可能会导致性能问题。

1.2 状态容器

在 React Native 应用中，包含导航架构的应用通常会采用不同的数据处理方式。以往，我们将数据存储在应用的根组件和屏幕组件中，并通过 props 将数据从父组件传递给子组件。而在这个应用中，我们将使用状态容器（state container）来管理所有应用数据，将其存放在组件外部的独立位置。

这种方式有助于分离应用中的 UI 和数据关注点。在具有多个顶级屏幕的典型应用中，我们可以将部分状态传递给每个屏幕。

1.3 第三方库

引入状态容器的一种方法是使用