为什么Reactjs必须在HOC中重用代码？

我只想运行一段javascript代码来查询后端GraphQL服务器。为什么我必须将查询包装在一个HOC组件中？就像书中说的

从“react apollo”导入{Query}；
从“graphql标签”导入gql；
常数交换率=（）=>(
{（{加载，错误，数据}）=>{
如果（加载）返回加载…
；
if（error）返回错误：（
；
返回data.rates.map（{currency，rate}）=>(
{${currency}:${rate}}

));
}}
);

这看起来是一个非常笨拙的解决方案？为什么必须这样？它使事情变得更容易还是更困难？它背后的哲学是什么

更新：

---

麻烦的一件事是：我只想进行一个API调用，它是不可见的，为什么我必须在render（）中呈现一个标记函数？API调用根本不应该是可见的。这种扭曲让我觉得整个HOC东西都是伪造的。你认为呢？

他们使用

渲染属性模式，因为它具有高度声明性的特性，正如所概述的那样

这种封装使得用表示组件组合查询组件变得轻而易举

现在是关于
Render Prop
本身，按照官方的说法

术语“渲染道具”是指一种使用道具（其值为函数）在React组件之间共享代码的简单技术

具有渲染属性的组件接受一个函数，该函数返回React元素并调用它，而不是实现自己的渲染逻辑

如前所述，此技术是React处理横切关注点的首选方法

组件是React中代码重用的主要单元，但如何共享一个组件封装到其他需要相同状态的组件的状态或行为并不总是显而易见的

因此，使用
render prop
，您只会输出封装状态的公共结果，您希望与其他组件共享这些结果

render prop
不是
HoC
，而是react团队最近采用的一种替代方案。
以下是它们的合理化：。这肯定比处理整个请求生命周期要简单。查询组件从您的同事那里抽象出所有状态处理和其他与请求相关的功能最麻烦的一件事是：我只想进行一个API调用，它是不可见的，为什么我必须在render（）中呈现一个标记函数？API调用根本不应该是可见的。这种扭曲让我觉得整个HOC的东西都是伪造的。@NicolasS.Xu你不必，你可以使用HOC-like来注入你的请求逻辑，而不是一个带有
的呈现道具。但最终你会将数据操作的结果放入呈现中。你可以选择将所有组件混合在一个组件下，但您也可以将其分离为自己的组件。因此，查询组件是为此定义声明性接口的自然结果。您还可以了解查询组件模式的好处
import { Query } from "react-apollo";
import gql from "graphql-tag";

    const ExchangeRates = () => (
      <Query
        query={gql`
          {
            rates(currency: "USD") {
              currency
              rate
            }
          }
        `}
      >
        {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :(</p>;

          return data.rates.map(({ currency, rate }) => (
            <div key={currency}>
              <p>{`${currency}: ${rate}`}</p>
            </div>
          ));
        }}
      </Query>
    );