Home > News content

Facebook开源Relay技术预览版

via:博客园     time:2015/8/23 14:30:12     readed:700

为了解决前端渲染网站遇到的性能及 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 将会在离线支持、实时更新和扩展等方面进行进一步的发展。

China IT News APP

Download China IT News APP

Please rate this news

The average score will be displayed after you score.

Post comment

Do not see clearly? Click for a new code.

User comments

Related news