Facebook 在继电器项目中分离React组件

我已经与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;

当我开始学习更多关于接力赛的知识时，我开始明白了

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

及

当继电器用于React组件的组件级时，我不知道该组件如何保持其可重用性？ 我还在学习接力赛的方法。我不知道如何在样式指南和多个项目（另一个不实现中继的项目）中使用组件。我可能会在多个中继项目中使用一个组件，但就是这样

还有其他人面临过这个问题吗？当Facebook在网站上解释这一点时

---

他们使它听起来好像组件松散耦合从继电器。我错过了什么

React并没有规定我们应该如何获取数据，因为它是一个UI框架。我们可以强制地（例如，使用RESTAPI）或声明式地（例如，使用中继）获取数据。如果您在React组件中使用特定于中继的功能（例如，

this.props.Relay

，mutation），则您决定在应用程序中使用声明性数据获取，并使用中继来实现。因此，在不使用中继的项目中不可能重用这些。这就是使用框架的代价，IMHO

当Facebook在文章中解释这一点时，他们听起来好像组件是从继电器松耦合的

重要的是要了解继电器如何解耦反应部件

继电器解决了一个特殊的反应问题。当我们有一个层次结构或组件树，并且父组件需要知道其子组件的所有数据需求时，就会出现问题。因为父组件必须以

props

的形式传递所有这些数据。当子组件的数据需求需要更改时，它会产生一种级联效应，即更改一直到父组件

中继通过使子组件能够独立地修改其自己的数据需求来解决此问题，而无需修改组件树中的链。父组件只需要声明它涵盖哪些子组件的数据需求。因此，父级不需要知道组件的详细信息

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

this.props.relay.hasOptimisticUpdate(hidingSpot)