开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Relay首页、文档和下载 - React 数据驱动 JavaScript 框架 - 开源中国社区
全部项目分类
我要评价
BSD
JavaScript
跨平台
Facebook
分享
收藏
87 人收藏
收录时间:2015-09-16
Relay 详细介绍
温馨提示:该项目除了使用 BSD 协议授权外,还需遵守附加的专利授权

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

主要特性:

  • 声明式:不再使用一个命令式 API 与数据存储通讯。简单的使用 GraphQL 声明你的数据需求,让 Relay 理解如何,什么时候获取你的数据。

  • 托管:查询在视图后面,Relay 聚合查询成有效的网络请求,只获取你需要的数据。

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

简单列表:

class Tea extends React.Component {
  render() {
    var {name, steepingTime} = this.props.tea;
    return (
      <li key={name}>
        {name} (<em>{steepingTime} min</em>)
      </li>
    );
  }
}
Tea = Relay.createContainer(Tea, {
  fragments: {
    tea: () => Relay.QL`
      fragment on Tea {
        name,
        steepingTime,
      }
    `,
  },
});
class TeaStore extends React.Component {
  render() {
    return <ul>
      {this.props.store.teas.map(
        tea => <Tea tea={tea} />
      )}
    </ul>;
  }
}
TeaStore = Relay.createContainer(TeaStore, {
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        teas { ${Tea.getFragment('tea')} },
      }
    `,
  },
});
class TeaHomeRoute extends Relay.Route {
  static routeName = 'Home';
  static queries = {
    store: (Component) => Relay.QL`
      query TeaStoreQuery {
        store { ${Component.getFragment('store')} },
      }
    `,
  };
}
ReactDOM.render(
  <Relay.RootContainer
    Component={TeaStore}
    route={new TeaHomeRoute()}
  />,
  mountNode
);


Relay

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 Relay 的评论 (全部 0 条评论)
{{repayCom.userName}}
Relay 相关博客
顶部