在 Relay 项目中分离 React 组件答案

【问题标题】：Separating React Components in a Relay Project在 Relay 项目中分离 React 组件
【发布时间】：2016-09-05 18:40:38
【问题描述】：

我使用 React 已经有一段时间了，我很高兴学习和采用 Relay.js。我很难找到一种方法来保持组件在多个项目中可重用并仍然使用 Relay。我能够从中继容器中分离组件。我认为这是正确的举动。请看下文。

反应组件

import React from 'react';
    class ItemList extends React.Component {
        createList(item) {

            return (
                <li id={item.node.id} key={item.node.id}>{item.node.name}</li>
            );
        }
        render() {
           let listValues = this.props.test.edges.map(this.createList);
            console.log(this.props.test);
            return (
                <div>
                    <h1>My List</h1>
                    <ul>
                        {listValues}
                    </ul>
                </div>
            );
        }
    }


    export default ItemList;

中继容器

import React from 'react';
import Relay from 'react-relay';
import ItemList from './ItemList.js';
    export default Relay.createContainer(ItemList, {
        fragments: {

        },
    });

随着我开始更多地了解 Relay，我开始看到

this.props.relay.getPendingTransactions(this.props.game)

和

this.props.relay.hasOptimisticUpdate(hidingSpot)

当 Relay 用于 React 组件的组件级别时，我看不到该组件如何仍然保持其可重用性？我还在学习中继方式。我看不到如何在样式指南和多个项目中使用组件（另一个不实现中继）。我也许可以在多个中继项目中使用一个组件，但就是这样。

还有其他人遇到过这个问题吗？当 Facebook 在 https://facebook.github.io/relay/docs/thinking-in-relay.html 它们听起来好像组件与继电器松散耦合。我错过了什么？

【问题讨论】：

标签： facebook facebook-graph-api reactjs relayjs

【解决方案1】：

React 并没有规定我们应该如何获取数据，因为它是一个 UI 框架。我们可以命令式（例如，使用 REST API）或声明式（例如，使用 Relay）获取数据。如果你在你的 React 组件中使用 Relay 特定的特性（例如，this.props.relay，mutation），你决定在你的应用程序中使用声明式数据获取并使用 Relay 来这样做。因此，不能在不使用 Relay 的项目中重用那些。这就是使用框架的代价，恕我直言。

当 Facebook 在 https://facebook.github.io/relay/docs/thinking-in-relay.html 中解释它时，他们听起来好像组件是从中继松散耦合的。

了解 Relay 如何解耦 React 组件非常重要。

Relay 解决了 React 的一个特定问题。当我们有一个层次结构或组件树并且父组件需要知道其子组件的所有数据需求时，就会出现问题。因为父组件必须将所有这些数据作为props 传递。当子组件的数据需求需要更改时，它会产生级联效应，一直到父组件。

Relay 解决了这个问题，让子组件可以独立修改自己的数据需求，而无需修改组件树中的链向上。父组件只需要声明它覆盖了哪些子组件的数据需求。因此，父级不需要知道组件的详细信息。

【讨论】：