为什么要使用高阶组件

Question

我正在显示联系人列表数组。

如果联系人数组为空，将显示加载程序，否则将显示联系人列表。

我使用高阶组件Using this tutorial呈现加载器。为此，我获得了性能摘要，如下图所示-

​

​

当我使用简单的if else条件呈现加载器时，我得到了如下的性能图：

​

通过比较，我知道当使用高阶组件时，它比简单循环需要更多的时间。

有人能给我解释一下哪个更好用吗？什么时候我们应该使用高阶分量呢？使用高阶组件的优点和缺点是什么？

Answer 1

更高级别的组件允许您将在多个组件中通用的功能或数据应用于组件，并将返回包含HoC的功能或数据的new组件。

至于优点或缺点。将完全取决于您试图解决的环境和问题。您还需要执行一长串测试，因为时间太接近，无法真正说一个比另一个更快。而且，这看起来像是在您的本地，所以在生产服务器上可能是完全不同的情况。

但是在您的环境中，您是否向<Loader />组件应用了任何额外的功能？如果您不需要，或者该功能不会在其他任何地方使用，那么在您的情况下可能没有必要使用HoC。

ReactJS - Higher Order Components

Answer 2

适用于HOC的优点：

在你的应用程序/项目中实现极端的可重用：

// withShowSupport.js
export default Component => props =>
  !props.show
  ? null
  : <Component { ...props } />

易于测试

资源：

https://www.robinwieruch.de/gentle-introduction-higher-order-components/

Answer 3

新技术可以使我们在生产力方面更有效率。但是，当然，它也会增加资源的使用。

我没有足够的知识来解释更多，但我可以给你一个简单的研究案例。

我有一个react应用程序，它由几个页面组成(> 10页如何？)。我希望在呈现每个页面时执行一些操作(换句话说，页面更改)。If-else条件渲染？不行!

实际上，您可以创建一个名为withBase的临时组件来包装每个页面(在导出页面组件时使用它，例如export default withBase(Home))。withBase将执行一个指示页面已更改的函数。

DEMO