8、探索流行的组件组合模式与 GraphQL 实践

探索流行的组件组合模式与 GraphQL 实践

1. 高阶组件（HOC）与 FunctionAsChild 模式

高阶组件（HOC）是 React 中一种强大的组件组合方式，通过使用 HOC 可以传入一个组件，然后返回一个带有额外功能的新组件。常见的 HOC 有 Redux 中的 connect 和 Relay 中的 createFragmentContainer 。

另一种在 React 社区逐渐流行的模式是 FunctionAsChild 模式。其核心概念是，不直接以组件形式传递子元素，而是定义一个可以从父组件接收参数的函数。示例代码如下：

const FunctionAsChild = ({ children }) => children()

这个组件的 children 属性被定义为一个函数，在渲染时会调用该函数。使用方式如下：

<FunctionAsChild>
  {() => <div>Hello, World!</div>}
</FunctionAsChild>

在这个例子中， children 函数在父组件的渲染方法中被调用，返回包裹在 div 标签中的 Hello, World! 文本并显示在