转载

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读者交流群 Facebook开源Relay技术预览版）。