构建react-apollo应用：<Query>组件与graphql()函数该选哪个？

嘿，这个问题我当初刚用React Apollo的时候也纠结过！其实这俩方案都是React Apollo提供的绑定组件和GraphQL查询的方式，只是推出的时间和适用场景不太一样，咱们掰扯清楚：

先说说组件 #

这是React Apollo后来推出的Render Props模式方案，也是现在更推荐的方式，优势很明显：

• 代码结构更直观：就像你给出的例子那样，直接在组件内部嵌套<Query>，把loading、error、data的处理逻辑放在渲染回调里，不需要额外的组件包装，逻辑和UI直接绑定在一起，读起来一目了然。
• 避免HOC嵌套地狱：如果你的组件需要多个GraphQL查询，用HOC的话会一层套一层（比如graphql(QUERY1)(graphql(QUERY2)(MyComponent))），而<Query>可以直接嵌套或者并列写，代码不会变得乱糟糟。
• 兼容函数式和类组件：不管你写的是函数组件还是类组件，都能轻松用上，而且和后来的React Hooks（比如useQuery）理念一致，过渡起来也更顺畅。
• 更灵活的查询控制：比如你可以通过skip属性控制查询是否执行，或者直接在组件内部动态传递查询变量，比HOC的方式更直接。

再说说graphql()高阶组件 #

这是React Apollo早期的核心方案，主要是通过包装组件的方式，把查询的结果（data、loading、error等）注入到组件的props里。它的适用场景主要是：

• 维护老项目：如果你的项目已经大量使用了graphql() HOC，为了保持代码风格一致，没必要强行改成<Query>，继续用就好。
• 类组件的传统写法：在没有Render Props和Hooks的时候，类组件只能通过这种方式绑定查询，不过现在有了<Query>，类组件也可以用更清晰的写法了。

我的选择建议 #

1. 新项目优先选组件（或者更推荐React Apollo提供的useQuery Hooks，它是<Query>的函数式简化版），代码更简洁，可读性更高，也符合React的发展趋势。
2. 老项目保持一致性：如果项目里已经用了很多graphql() HOC，继续沿用即可，没必要重构，除非你有明确的优化需求。
3. 如果你需要在组件内部灵活控制查询的执行（比如根据用户操作触发查询、动态修改变量），<Query>会比graphql() HOC更顺手。

举个简单对比，用graphql() HOC的写法大概是这样：

const GET_ALL_DOGS = gql`
  query {
    dogs { id breed displayImage }
  }
`;

class Feed extends React.Component {
  render() {
    const { loading, error, data } = this.props;
    if (error) return <Error />;
    if (loading || !data) return <Fetching />;
    return <DogList dogs={data.dogs} />;
  }
}

export default graphql(GET_ALL_DOGS)(Feed);

对比你给出的<Query>写法，明显后者的逻辑更内聚，不需要额外的类组件或者props传递，代码更清爽。

内容的提问来源于stack exchange，提问作者Mark B