/ react native

React Native跨平台移动应用开发实战 - 数据同步

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解应用和服务端之间如何同步数据。一方面应用里用户输入的数据需要提交到服务端,另一方面应用也需要从服务端获取其他用户提交的数据。涉及的工作包括表单数据验证,请求服务端API,缓存服务端响应数据等。这些是纯技术层面的工作,不涉及具体业务逻辑,但却是后面业务逻辑开发工作开展的前提。

  1. 表单数据验证
  2. 请求API
  3. 缓存数据

表单数据验证

以登录页面为例,表单数据验证效果如下。在用户输入的同时,会实时验证输入数据。如果验证失败,将在导航栏下方给予提示。这种验证方式比提交数据后由服务端来验证并反馈给用户在体验方面更好。当然处于安全考虑,服务端数据验证仍然需要。

在用户输入过程中,监听变化,如果数据发生变化则调用saveInput来保存新数据。保存数据的同时会调用validateInput来验证数据,验证结果保存在store的error.input属性下。

如果验证结果不为空,表示输入有误,Layout里的输入错误组件会显示出来。

请求API

RN的 Networking 支持 Fetch API来执行网络请求。相比于XHR,fetch更强大和灵活。为了让应用里的网络请求更简单和统一,以及在请求前后添加一些全局操作,比如打印日志和显示Loading图标,我们对fetch作了进一步封装。

缓存数据

使用缓存,可以在从服务端请求数据完成之前显示缓存数据,而不是空白页面。在没有网络的时候,还可以支持离线模式浏览历史数据。一个良好设计的缓存,不但能提升用户体验,还能减少服务端请求,提升服务端性能。

在球场应用的缓存数据分为两大类,一是列表类数据,二是对象类数据。列表类数据只保存列表对象的ID,对象的具体信息统一保存在对象类数据里。这样的好处,一是避免同一对象信息在不同列表中冗余,二是同一对象数据只有一份,修改时只要修改这一份,所有列表中的对象显示将同步更新。不同对象之间为层级关系,比如POST有创建者,那么POST对象里会引用USER对象,USER对象可能还会引用其它对象。这部分的代码有些复杂,需要多花点时间来理解。

React Native跨平台移动应用开发实战 - 数据同步
Share this