BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Facebook开源Relay技术预览版

| 作者 张天雷 关注 4 他的粉丝 发布于 2015年8月22日. 估计阅读时间: 4 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

为了解决前端渲染网站遇到的性能及SEO问题,Facebook在2014年推出了用于构建UI的JavaScript库——React。之后,在2015年1月份召开的React.js会议上,Facebook又公开了在React上应用GraphQLRelay框架。近日,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读者交流群InfoQ好读者)。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT