Relay是构建数据驱动 React 应用的js框架。

Relay:特性一、声明式:不再使用一个命令式API与数据存储通讯。而是简单的使用RraphQL声明组件数据需求,让Relay理解如何及什么时候获取你的数据。

    特性二、托管:Relay聚合查询成有效的网络请求,只获取个人需要的数据。

    特性三、转变:Relay允许你使用GraphQL mutations 在客户端和服务器端转变数据,提供自动数据一致,优化更新和错误处理。

Relay通过维护组件与数据的依赖--在依赖的数据就绪前 组件是不会被渲染的,Relay用缓存的所有GraphQL数据的唯一的store,管理数据订阅和试图更新。

Relay的声明式数据获取:relay通过抽象出一个container的概念,让每个模块提前声明自己需要的数据,Relay会先遍历所有container,组成query tree,这样就达到了只使用一个网络请求的目的,同时通过声明式数据获取还可以更好的对组件约束,只能获取它已声明的数据,relay也可以做些验证。

GraphQL 一种查询语句,用于在复杂的应用程序的数据模型中,描述数据要求。

    step1:建立GraphQL 型架构影射到代码库。

    step2:服务针对该类型架构的查询结果,运行一个查询 获取一个字段。graphQL功能首先确保查询语法和语义有效执行,否则报告错误。

import {
graphql,
GraphQLSchema,
GraphQLObjecType,
GraphQLString
} from 'graphql';
var schema = new GraphQLSchema({
query:new GraphQLobjectType({
name:'RootQueryType',
fields:{
hello:{
type:GraphQLString,
resolve:() => 'world'
}
}
})
}); var query = `{boyhowdy}`;
grqphql(schema,query).then(result => {
    ...
    console.log(result);
});

Relay只有一个store,通过action(relay为mutations)改变,但禁止直接控制,根据GraphQL的查询语句去自动处理,储存或修改服务端数据。。

mutitations在客户端和服务器端都修改数据,保持数据一致,只能变更在服务器端声明过得数据,并且服务器必须有一个graphQL服务。

参考网站:redux 与 relay对比:http://www.tuicool.com/articles/7feMZrb

relay把React组件包裹进relay容器,能够自动检索子组件的数据依赖(根据GraphQL 查询片段),确保在graphQL查询片段在组件被渲染之前获取到数据,查询数据作为props传递进UI组件

Mutations(变更):客户端改变数据是常见需求,希望交互更快,做到乐观更新(页面UI先改变,再以服务器返回结果为准更改页面UI,如果出错会回滚),之后等到服务器返回结果,进行UI改变。

relay中获取数据,定义mutation,mutation首先是一个操作,然后是个查询,因此可以通过mutations使用GraphQL查询,以类似方式获取数据

  

Relay GraphQL理解的更多相关文章

  1. [转] Initial Impressions on GraphQL & Relay

    https://kadira.io/blog/graphql/initial-impression-on-relay-and-graphql http://graphql.org/blog/subsc ...

  2. [转] Node.js 服务端实践之 GraphQL 初探

    https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.n88wyan4e 0.问题来了 DT 时代,各种业 ...

  3. 【转】2016/2017 Web 开发者路线图

    链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...

  4. ReactEurope Conf 参会感想

    React 带来的革命性创新是前端世界过去几年最激动人心的变化.自从接触 React 以来,我深信 React 会改变客户端开发者(包括前端.iOS 和 Android)的开发体验.这次在巴黎举办的  ...

  5. fir.im Weekly - 如何打造 Github 「爆款」开源项目

    最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...

  6. CFF前端沙龙总结

    一. -OOCSS + Sass ——大漠 1. OOCSS 结构<=>皮肤 分离 容器<=>内容 分离 2. Sass 工具.处理器 SCSS(CSS风格)<=> ...

  7. 一、REACT概述

    1.前端/react概述 <从零react> 1.前端工 程概述 Web跨平台.跨浏览 器的应用开发场景 网页浏览器(Web Browser) 通过 CLI 指令去操作的 Headless ...

  8. React.createClass vs. ES6 Class Components

    1 1 1 https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ React.crea ...

  9. ApacheCN NodeJS 译文集 20211204 更新

    Node API 开发入门指南 零.前言 一.Node.js 简介 二.构建 API--第 1 部分 三.构建 API--第 2 部分 React TypeScript Node 全栈开发 零.序言 ...

随机推荐

  1. jxls实现动态图表

    此文章是基于 jxls实现基于excel模板的报表 一. 制作excel动态图表模板 1. 安装 excel 2003 ,新建文件,命名为:runRecord.xls 2. 创建两个表格,分别命名为: ...

  2. org.springframework.beans.factory.NoSuchBeanDefinitionException

    1. 问题描述 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'xxxx ...

  3. [转]webapi部署在IIS7.5报404的解决方案

    1.iis 目录权限设置 2.转自:http://www.cnblogs.com/youlies/p/6042169.html 在web.config添加如下节点 <system.webServ ...

  4. php扩展库

    php调用C/C++动态链接库 字数997 阅读28 评论0 喜欢0 本人最近在找实习,移动开发方向.有意者可直接与本人联系.谢谢! 一.简介 一般而言,php速度已经比较快,但是,对于一些较高级开发 ...

  5. js Array数组对象常见方法总结

    Array对象一般用来存储数据. 其常用的方法包括: 1.concat()方法 concat() 方法用于合并两个或多个数组.它不会更改现有数组,而是返回一个新数组. 例如: var arr1=[1, ...

  6. Java 监听器,国际化

    1. 监听器 1.1 概述 监听器: 主要是用来监听特定对象的创建或销毁.属性的变化的! 是一个实现特定接口的普通java类! 对象: 自己创建自己用 (不用监听) 别人创建自己用 (需要监听) Se ...

  7. 关于 class 的命名

    class名称中只出现小写字符和破折号 使用有组织或目的明确的名称,不使用表现形式 基于最近的的父class 作为新class的前缀 使用 .js-* 来标识行为,并且不要将这些class包含到css ...

  8. 解决 spring cloud 项目的 com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAspect 错误信息

    在项目中引入:引入hystrix依赖,如下 <dependency> <groupId>org.springframework.cloud</groupId> &l ...

  9. Android热修复 Dex注入实现静默消灭bug

    当app上线后发现紧急bug,如果重新发布版本周期比较长,并且对用户体验不好,此时热修复就派上用场了.热修复就是为紧急bug而生,能够快速修复bug,并且用户无感知.针对热修复,阿里系先后推出AndF ...

  10. Asp ose.Tota l for .NET 2015

    How to license Aspose.Total for .NET products Add "License.cs" [C#] OR "License.vb&qu ...