Facebook 开源 Relay 技术预览版

为了解决前端渲染网站遇到的性能及 SEO 问题，Facebook 在 2014 年推出了用于构建 UI 的 JavaScript 库—— React 。之后，在 2015 年 1 月份召开的 React.js 会议上，Facebook 又公开了在 React 上应用 GraphQL 的 Relay 框架。近日，Facebook 终于发布并开源了Relay 的技术预览版。接下来，本文就对Relay 进行简要介绍。

首先，本文对React 和GraphQL 进行简要说明。React 框架以其组件和基于组件的设计流程、单向的数据流动、采用虚拟DOM 作为操作对象和在JavaScript 中声明式的描述UI 等特性，为web 应用开发带来了诸多好处，变革着相关开发人员的开发体验。然而，React 在与服务器中的数据进行交互方面存在着一定的问题。客户端与服务器端脆弱的耦合方式经常引起数据相关的问题，而且使得产品的迭代越来越难。而且，开发人员不得不根据产品的发展，不断的重新实现复杂的异步逻辑。另外一方面，GraphQL 是Facebook 已经在原生应用上使用多年的、用于描述复杂嵌套的数据依赖的查询语句。GraphQL 支持更加灵活的查询方式，使得前端与后端工程师可以更加高效的进行合作，成为解决React 中数据交互问题的可能方案。因此，随着React 的崛起，如何在React 中使用GraphQL 已经变为迫切需求。为此，Facebook 在今年初提出了Relay。

Relay 充分吸取了 React 之前的经验和教训，提出了声明式、面向组件的数据抓取方式。声明式的数据抓取意味着 Relay 应用直接指定所需要的数据内容。正如 React 使用的声明式 UI 的一个描述来管理视图更新一样，Relay 以 GraphQL 查询的方式来使用声明式数据。给定这些描述，Relay 自动完成查询打包、异步通信逻辑的管理、数据缓冲以及随着数据变化而自动更新视图等工作。面向组件的方式使得 GraphQL 查询可以根据需求精确描述所需要的数据。这就可以有效避免数据取少或者取多可能引起的问题。

Relay 架构主要包括了 Relay 组件、Action、Relay Store 和服务器四部分。在 Relay 中，每个组件都可以自定义其所需要 GraphQL 数据格式。在组件实例化的时候，它会向 GraphQL 服务器发送请求，然后使用 this.props 从 Relay Store 中访问获取到的数据。而当数据变化时，Relay 通过 Action 通知相应组件更新，并在客户端的 Relay Store 中维护一份数据缓存。此外，为了提高数据传输的效率，Relay 支持开发者自由地组合 React 组件，并自动构建嵌套组件的 GraphQL 查询，把多个组件的小请求合并为一次 GraphQL 请求。

目前，Relay 技术预览版的相关代码已经依托在 GitHub 中。用户利用 git clone 下载版本库后，即可进行安装和体验。由于该版本只是预览版，Facebook 团队表示，Relay 在某些方面肯定存在不完美的地方。该团队会与GraphQL 社区合作，及时进行版本更新。未来，Relay 将会在离线支持、实时更新和扩展等方面进行进一步的发展。

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们，并与我们的编辑和其他读者朋友交流（欢迎加入 InfoQ 读者交流群）。