为什么要使用高阶组件

Question

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

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

我使用更高阶的组件Using this tutorial渲染加载器。为此，我得到了如下图所示的表现摘要 -

当我使用简单的if else条件渲染加载器时，我的性能图如下 -

比较这一点我知道，虽然使用更高阶的组件，它需要比简单循环更多的时间。

任何人都可以解释一下哪个更好用？什么时候应该使用高阶组件？使用高阶组件有哪些优缺点？

Answer 1

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

至于优点或缺点。完全取决于您试图解决的环境和问题。你还需要执行一长串测试，因为时间太接近了，真的说一个比另一个快。这看起来像是在你当地的生产服务器上可能是一个完全不同的故事。

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

ReactJS - Higher Order Components

Answer 2

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

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

我有一个反应应用程序，它包含几个页面（大约10页？）。我想在每个页面渲染时做一些事情（换句话说，页面更改）。 if-else条件渲染？没门！

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

DEMO

Answer 3

根据定义：

HOC是一个函数，它接受您的组件作为参数，并返回一个新功能，为组件添加一些功能。

一个简单的用例是 - 当您调用API来获取某些数据并使用它们在应用程序中呈现某些内容时，我们需要显示某种进度条，加载指示符等，以告知用户正在获取数据。我们可以将HOC用于此目的。示例代码在这里

import React from 'react';
import List from './List.js';
import WithLoading from './WithLoading.js';
const ListWithLoading = WithLoading(List);
class App extends React.Component {
  state = {
    loading: false,
    repos: null
  }
  componentDidMount() {
    this.setState({ loading: true });
    fetch(`https://api.github.com/users/farskid/repos`)
      .then(json => json.json())
      .then(repos => {
        this.setState({ loading: false, repos: repos });
      });
  }
render() {
    return (
      <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />
    )
  }
}

以上是App.js文件，下面是HOC组件WithLoading

import React from 'react';
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return (<Component {...props} />);
    return (<p>Be Hold, fetching data may take some time :)</p>);
  }
}
export default WithLoading;

所以在App.js中，我们称HOC为const ListWithLoading = WithLoading(List);和<ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />，其中List是传入HOC的组成部分。基于sLoading道具，显示了loding符号。另一个有趣的事情是HOC没有渲染menthod！因为它的功能简单！

Answer 4

HOC的优点：

可以在您的应用/项目周围重复使用：

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

易于测试

真：

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

Answer 5

根据我的理解，Higher-Order-Component在组件或库之间添加了一个额外的层，以便更好地重用代码。

例如，您有一个库文件“User.class.js”，负责检索/存储用户数据，并由不同的组件使用。修改“User.class.js”时，方法名称已更改，或参数已更改。你要做什么？将更改应用于所有这些组件？如果它被100个不同的组件使用，甚至更多？使用Higher-Order-Component，您只需将更改应用于单个文件。