如果你最近在做一些React 开发，你一定遇到过 HOCs 和 Render Props 之类的术语。在本文中，我们将深入探讨这两种模式，以了解我们为什么需要它们以及如何正确使用它们来构建更好的 React 应用程序。

为什么我们需要这些模式？

React 提供了一种简单的代码重用方法，那就是组件。一个组件封装了许多东西，从内容、样式和业务逻辑。所以理想情况下，我们可以在单个组件中组合 html、css 和 js，所有这些都有一个目的，一个职责。

提示：为您的组件使用Bit (GitHub )。它将帮助您在应用程序之间组织、共享和重用它们以更快地构建。在可视化集合中发现您的组件、尝试 Playground 并在代码中安装也很有趣。

例子

假设我们正在开发一个电子商务应用程序。像任何电子商务应用程序一样，向用户显示所有可用的产品，并且用户可以将任何产品添加到购物车。我们将从 API 获取产品数据并将产品目录显示为卡片列表。

在这种情况下，React 组件可以这样实现：

对于我们的管理员，有一个管理门户，他们可以在其中添加或删除产品。在此门户中，我们从同一 API 获取产品数据并以表格形式显示产品目录。

这个 React 组件可以这样实现：

立即突出的一件事是这两个组件都实现了产品的数据获取逻辑。