说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

Relay: 全新的React数据获取框架

HTML文档下载 WORD文档下载 PDF文档下载
Relay是全新的React数据获取框架,可帮助React应用中获取数据。Facebook已发布并开源了Relay的技术预览版,本文将对Relay进行全面的技术解析。

本文翻译自sitepoint网站Kev Zettler撰写的《React Data Fetching with Relay》一文,感谢景庄对该文章的翻译。

React在前端领域开启了一个新的时代。随着Facebook发布并开源React,它迅速成为大量技术公司 运用在生产环境中的一款流行的库。在本文中,我们将会讨论的是一个全新的React附属框架——Relay。

React中数据获取存在的问题

由于React正在变得越发流行,使用React构建的项目的规模和复杂度也随之增加。 由于React只是一个视图层的库,这使得某些团队需要在不同的基础设施上构建项目时会面临很多未知的问题和挑战。 基于这些痛点,Facebook也前瞻性的给予了很多技术支持和指导。

Flux

对于使用React的开发者而言,早期的主要痛点之一是事件处理。为了解决这个问题,Facebook发布了Flux, 它是一种基于单向数据流思想来解决React中事件处理问题的设计模式(不是一个框架)。

我假设你已经对Flux有所了解了,因此本文不会具体地去讨论Flux。假如你对Flux并不了解,可以参考下面两篇文章:

  1. 使用React和Flux来构建一个记事APP
  2. Flux:一种为React打造的应用程序架构

Flux将React生态系统带到了一个更高的层级。即使这样,当开发者开始使用并熟悉Flux时,一些新的问题又出现了。Flux适合用于管理作为应用程序状态的数据,但是如何将初始状态传递进应用程序成为了又一个问题之源。

围绕着Flux的数据初始化面临着许多的挑战。在Store中向服务器发起请求并传递给自身?在dispatcher中使用rehydrate方法? 在服务器上调用一组actions来传递到store?对于同构应用而言,如何在返回响应前完成数据的异步加载?

什么是Relay

Relay是Facebook发布的一个全新的React数据获取框架。 Relay致力于为所有上述这些数据获取问题提供清晰的解决方案。

Relay主要有以下几个特点:

  • 描述性 Declarative:这也是React的主要特点之一,对于数据依赖,Relay使用了描述性的代码风格定义, 这非常类似于在React中定义视图层组件的方式。这也是和传统的命令式的数据获取API主要不同的地方。
  • 托管 Colocation:数据依赖的定义始终伴随着组件的定义。这使得能够非常简单的推出UI组件需要渲染哪些数据。 这使得解决项目中的代码问题变得非常简单。只需检查一个文件中包含的React组件定义,就能立刻知道函数所需要的数据是什么。
  • 变种 Mutations:它使得无缝的数据修改称为可能,也就是说React视图层会订阅数据,并且能够会将修改传播到数据持久化层。

Relay vs Flux

Flux是一个抽象的概念,而Relay是基于这个抽象概念的实现。Relay是建立在Flux的概念基础上, 因此也有和Flux中相同的概念,例如dispatcher,actions和stores,但它们代表的含义有所不同。 Relay有一个新的叫做“高阶组件”的概念,我们在本文的后面会继续讨论这个概念。

到现阶段为此,还不清楚Relay是否会替代(或并存)现存的Flux实现。 例如,Redux,它是一个非常流行的Flux实现, 同样也使用了“高阶组件”的概念。如果你尝试同时使用Redux和Relay,会遇到具体由哪个框架绑定到UI组件上的冲突。 目前,你可以参与Redux和Relay关系的讨论。

高阶组件

高级组件(Higher Order Compoenents, 简称HOC)的定义采用和普通的React组件相同的方式。 HOC组件会包裹将UI组件作为孩子包裹起来(称UI组件为子UI组件)。HOC组件会执行相关查询, 然后渲染子UI组件,并将查询数据作为props传递进UI组件。

现在Flux数据流由HOC组件管理,之后将会扮演dispatcher的角色。它具有一个类似于setQueryParams()的方法, 可以将其看作为Flux中的action。调用setQueryParams()将会触发Flux数据流。 定义在HOC组件中的查询被更新,新的数据被获取,并被持久化在HOC组件中。 通过持久化这些数据HOC组件也扮演者Flux中Store的角色。

下面来举个简单的例子来说明上面的描述:假设有一个ProfilePicture组件和一个对应的HOC组件。 其中ProfilePicture组件可以用来在我们的整个项目中渲染用户的头像。相应的,我们需要获取数据来展示用户头像。 因此我们可以借助Relay来创建一个HOC组件用于从数据库中查询用户的头像信息。 最后,由HOC组件将数据传递给子UI组件(即ProfilePicture组件)。

class ProfilePicture extends React.Component {    // A standard Profile Picture component }// HOC: it fetches the data to pass as props to ProfilePicturemodule.exports = Relay.createContainer(ProfilePicture, {    fragment: {        user: () => Realy.QL `            fragment on User {                profilePicture(size: $size) {                    uri,                    },              }        `,    }});

然后,我们的ProfilePicture组件会通过传递进来的props获得一些新的本地函数。 这就是Relay如何触发Flux数据流的基本原理。组件调用这些Relay的prop函数,就类似于调用Flux的action。 这可以让Relay去获取最新请求的数据,一旦数据获取完成便将其内部的store作为Props传递给HOC组件的子视图组件。

GraphQL

上面的代码中可能有一部分比较陌生的地方,尤其是这部分代码:

Relay.QL`    fragment on User {        profilePicture(size: $size) {        uri,        },    }    `,

在Relay背后绝大部分神奇的地方都是由GraphQL驱动的。GraphQL是Facebook开发的一种全新的的查询语言, 尤其擅长于查询图结构的数据。深入的讨论GraphQL不属于本文的范畴,你可以参考以下几篇文章来了解GraphQL:

  1. Relay和GraphQL简介。
  2. Relay入门。

现有的项目并不能直接与GraphQL集成,需要做相关的配置工作。首先你需要做的是:

  1. 创建GraphQL的Schema。
  2. 创建一个GraphQL服务器。

值得考虑的的是,对于已有的项目,如果想要改造项目以使用GraphQL模式可能会涉及到大量的修改工作, 你需要将现有服务器配置并修改为GraphQL友好的。因此,推荐你在启动一个新项目时尝试使用Relay, 为此,Facebook还提供了一个Relay Starter Kit来帮助你快速的使用Relay和GraphQL启动一个新的项目。

没有GraphQL的Relay

由于设置GraphQL涉及到一些额外工作,因此Relay并不适合在现有项目中使用。幸运的是,受到Relay的启发, 有一个叫做react-transmit的库可以更好的适应现有项目。它是一个开源项目, 其宣传语就是“一个受Relay启发的,使用Promise代替GraphQL的开源库”。

我们可以用react-transmit来重写上面的例子,代码如下:

// Import Transmitimport Transmit from "react-transmit";class ProfilePicture extends React.Component {    // A standard Profile Picture component}// This is our Higher Order Component. It fetches the data to pass// as props to Profile PictureTransmit.createContainer(ProfilePicture, {    fragments: {        user: (userId) => {            return new Promise(function(resolve, reject) {                 // Do some Ajax here and resolve the promise            });        }    },});

使用react-transmit的例子看起来和Relay的例子非常的像。但是,代码中的user部分现在返回的是Promise,而不是GraphQL查询。

Relay的近况

Facebook已经发布并开源了Relay的技术预览版。 在它的代码库中有一些非常不错的例子展示了如何使用Relay,并且有一个非常详尽的文档。

此刻对于Relay是否适合同构App还没有定论,因为暂时还没有方法能够告诉Relay,让它在渲染子视图之前, 先等待所有的数据依赖被加载完成,因此在服务器端需要做些事情。加入你对这个话题感兴趣,你可以参与有关Relay如何在服务端工作的讨论。 在问题还没有解决之前,你可以尝试使用react-transmit来应对相关问题。

至于Relay的未来,它的路线图展示了它未来的几个关键特性:

  • 适用于其他存储类型的是配置,不仅仅是图结构的数据。
  • 更好的同构支持,正如前面所提到的。

总结

在本文中,我们讨论一个新的被称为Relay的React附属框架。React基于和Flux同样的概念而构建, 并且由GraphQL驱动。正如我提到的,Relay可能并不适合用于一些现有项目。但是,这个框架非常的新, 期望它能够有越来越好的版本发布。

原文链接:React Data Fetching with Relay

译者简介:景庄,前端工程师,关注Node.js、前端工程化。个人博客: http://wwsun.github.com。

(责编:陈秋歌)

欢迎加入CSDN前端交流群2:465281214,进行前端技术交流。  

维基百科基金会推出众包旅游项目Wikivoyage 最舒适程序员:工作外包给中国 自己却偷懒 Evernote正在与苹果联合开发硬件记忆工具,未来两年公司上市 Fusion-io发布ioScale 全闪存数据中心时代到来? Agent Dash游戏设计之美:如何用2D打造3D体验? 开源项目文档应规避的13处“硬伤” 李开复:Graph Search将可与谷歌搜索媲美 月成本3500美元 如何在AWS上实现BBVA信用卡低延时分析 外媒眼中的国内互联网巨头:服务器集群庞大但缺乏创新 Facebook主导通用主板+SoC ARM与Intel同台对抗 假如像招聘程序员那样租车…… CrowdStar:Windows Phone 8是开发者的下一片蓝海 腾讯云总经理陈磊透露流量变现计划 将比亚马逊AWS更专注 代码之美——Doom3源代码赏析 英特尔公布2012财年财报 Q4净利润同比下滑27% 谷歌CEO佩奇:创新重于竞争 关注非增量改进 再尝败绩 微软杀软AV-TEST反病毒认证失败 财富:2013最佳雇主 谷歌第一微软75苹果未入榜 移动应用注册表单必死! 数据:2012年的全球互联网知多少 访中粮我买陈伟伟:高并发大压力挑战架构师极限 左路Deep Learning+右路Knowledge Graph,谷歌引爆大数据 数据库排行榜:关系型居首,NoSQL整体人气最高 联通:要做PaaS,存储最低为TB 百度资深交互设计师谈微信4.5版本 TalkingData推出移动游戏数据分析平台 一周消息树:著名计算机黑客Aaron Swartz自杀身亡 使用Windows 8模拟器及Visual Studio 2012调试IE 10触控及响应式Web设计 Azure、AWS要来了 IDC抱团取暖还是各找出路 C#使用ICDBurn实现CD刻录 验证码识别基础方法及C#/.NET源码 javascript的超级恶心问题!(急!!!!!!!在线等!!!!!!) 关于WINISO的问题! 今天很不爽,散分了,名字带狼的都有分 哪里有关于Oracle的电子书? 老问题:组件的注册问题 求最精彩的算法 下载出问题了,大家快来救呀 如何下载 .rt 文件 ??? 今天很不爽,散分了,名字带狼的都有分 奇怪问题,在线等待求救!!! 今天很不爽,散分了,名字带狼的都有分 如何设计能够处理动态字段的数据库(最好Paradox) 任何字体修饰都不起作用,为什么 怎样取得服务器IP地址? 谁有ERP详细设计书、数据字典。重谢 “网交控”能轻松帮助您的企业和单位最方便的控制和最高效的使用网络资源(介绍篇,顶者有分) 将query的数据倒入excel该如何处理 更新问题 找不到字段名 在线等 如果我要加入团队开发,那应该安装哪个ORACLE8i的产品?在线等 这一句错在哪里? [求助]关于多线程同时读写SOCKET 庆祝!经过公平选拔公司聘我配置管理经理! 送分!!!!!!!! 我想在DataSourceDataChange中写代码,来判断当某一字段的值输入为1时,我想让另一个字段显示! 怎样获取本机上网的DNS地址? 如何实现用JS实现首页调用 ! 请教各位大侠广告系统应怎么运作和推广?100分。附系统说明 IE不能运行JavaScript\vbScript,怎么解决这个问题? sql server ce 数据库压缩问题 我要从光盘拷贝文件出来,还有怎么获得光盘的大小等参数,谢谢。 vi中编写c程序,如何让关键字显示不同颜色 这个错误是为什么? 关于日期(Date)的问题! linux下weblogic7.0连接oracle的问题:pool和Data Resource如何配置???好难呀!!!!!! 下面一段写入数据库的代码 为什么 老出错误 急!高分求救!如何加密? 请问一个关于OpenDialog1程序运行的问题? 庆祝!经过公平选拔公司聘我配置管理经理! 在客户端打开服务器上的Word,PDF等文件时能否限制客户端COPY,另存等功能 分 多了该怎么办呢?:-) DataGrid及水晶报表问题!请高手指点!! 成功安装了oracle8.17,接下来我该怎么配置呢? .net frameword 1.1 C#语言有什么变化? 如何运行一句动态组装的sql语句?? 怪问题!高分求助!!! "面试试题"急求解答。急!!!!!!急!!!! 个人所得税计税基数由原来的800元,修改现计税基数1200元,请修改? 关于权限 javascript中怎样去掉字符串中的空格 求购基于Html的全文检索(用于光盘发布的)相关技术(控件和接口资料) 大家碰到这种问题是怎么解决的??? 求我没写的那几个字词的读音! 灾区手拉手活动作文的结尾我今天1:00就要!急 《我的语文老师》.五年级作文400字 小学五年级语文教师下水作文 山上的雪是从哪里来的塔里木河流域气候干旱,河流水源来自高山冰雪融水,那天山和昆仑山上的冰雪是从哪里来的? 有什么书籍可以增加对它的理解! 已知函数f(x)=2的负x次方-1(x0)若方程f(x)=x+a,有且只有两个不相等的实数根,则实数a的取值范围是 (6^x)-6*(9^x)+4^x=0六的X次方减6乘9的X次方加4的X次方 “且”“或” 解方程什么地方用哪个这个为什么用 ' 且' 不用 '或' 平时解二次方程都用或的啊 请教高中数学的解方程的题目方程中的第一个指数的底是6.7还是7,我按照习题上抄下来的,不知题目有没有错。如果是6.7 ,答案是什么?如果是7 ,答案是什么? f(x)的值是怎么算出来的? 默克尔手机疑遭窃听 德政界反应强烈要两名美国船员在尼日利亚遭武装海盗绑架韩央行行长:应仿效中国积极推新货币互德获悉美国安局监听默克尔通讯消息源为少女350美元创首饰公司 今年盈利或美联储提议加强美国大型银行流动性规定少女350美元创首饰公司 今年盈利或美电视节目现“杀光中国人”言论 在美秋收增产背后存隐忧 农民称增加的收入日本自卫队下月将出动逾3万人 演练登晒长腿大赛网络妹子华丽美腿惊呆网友(李克强:腐败是政府天敌 对腐败分子和文字实录:国务院总理李克强答中外记者李克强:让市场\"法无禁止即可为\"李克强:中国经济要升级,出口产品也要国务院总理李克强答中外记者问(实录)上官澈:坚守OR逃离北上广 我们的青公务员涨工资引争议 网友:\"公仆\李克强:简政放权是减少权力寻租、铲除李克强:简政放权是减少权力寻租、铲除李克强谈GDP增速下限:必须保证比较养生须知:5种食物绝对不能在深夜吃
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘