RelayReact 數(shù)據(jù)驅(qū)動(dòng) JavaScript 框架

Relay 是構(gòu)建數(shù)據(jù)驅(qū)動(dòng) React 應(yīng)用的 JavaScript 框架。

主要特性：

• 聲明式：不再使用一個(gè)命令式 API 與數(shù)據(jù)存儲(chǔ)通訊。簡(jiǎn)單的使用 GraphQL 聲明你的數(shù)據(jù)需求，讓 Relay 理解如何，什么時(shí)候獲取你的數(shù)據(jù)。

• 托管：查詢(xún)?cè)谝晥D后面，Relay 聚合查詢(xún)成有效的網(wǎng)絡(luò)請(qǐng)求，只獲取你需要的數(shù)據(jù)。

• 轉(zhuǎn)變：Relay 允許你使用 GraphQL mutations 在客戶(hù)端和服務(wù)器端轉(zhuǎn)變數(shù)據(jù)，提供自動(dòng)數(shù)據(jù)一致，優(yōu)化更新和錯(cuò)誤處理。

簡(jiǎn)單列表：

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
);