以下是 Aditya Agarwal 关于 React 中渲染道具和高阶组件之间区别的精彩文章。 我特别喜欢他用来解释这两者的演示。 但是，总结一下
高阶组件 (HOC) 接收一个组件并返回一个组件。 因此，假设您有一个名为 Username 的组件，它只返回用户姓名字符串，您想在某个地方将其大写 - 这是一个使用 HOC 来包装 Username 组件并更改每个字符的完美机会。 就像 Kingsley Silas 在 CSS-Tricks 上撰写的关于 优秀教程 一样。
HOC 特别适合您想要修改组件并在多个地方使用它时，或者创建少量代码以防止组件因太多选项和道具而不堪重负。
另一方面，渲染道具是“组件用来知道要渲染什么内容的函数属性”。 至少，这是 React 文档 中所说的，但我花了一段时间才弄明白。 就我理解，它允许您为 React 组件（通常是一个只有大量要重用的数据的组件）提供一种方法，并将它传递给另一个组件（因此，一个随后渲染该数据的组件）。
这是 React 文档中一个很好的例子
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={mouse => (
<Cat mouse={mouse} />
)}/>
</div>
);
}
}这里发生的事情是，有人在代码库中定义了一个 Mouse 组件，该组件根据用户鼠标的位置提供 x + y 坐标。 然后，此 Mouse 组件返回一堆数据，我们将其存储为 mouse，然后将其传递到 Cat 组件中，该组件使用这些数据渲染一些内容。
当您想重用 Mouse 中的数据时，以及当您想将大量不同类型的数据传递到 Cat 组件中时，这非常有用。 假设您希望 Cat 根据您输入的数据类型渲染其他内容。
因此，总而言之：HOC 和渲染道具是两种执行类似工作的方法。 也就是说，它们可以将我们的代码分解成许多可重用的部分，并鼓励我们创建从长远来看更灵活的组件。