facebook - 在 Relay 项目中分离 React 组件

Question

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

react 组件

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 它们听起来好像组件与继电器松散耦合。我缺少什么？

Answer 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 解决了这个问题，它使子组件能够独立修改自己的数据需求，而无需修改组件树中的链。父组件只需要声明它覆盖了哪些子组件的数据需求。因此，父级不需要了解码件的详细信息。