我正在显示联系人列表数组。
如果联系人数组为空，它将显示加载器，否则将显示联系人列表。
我使用高阶组件Using this tutorial 渲染加载器。为此，我得到了如下图所示的性能摘要-
当我使用简单的 if else 条件渲染加载器时，我的性能图如下 -
比较一下，我知道在使用高阶组件时，它比简单循环需要更多时间。
谁能解释一下哪个更好用？什么时候我们应该使用高阶组件？使用高阶组件的优缺点是什么？
【问题讨论】：
标签： reactjs debugging react-native google-chrome-devtools
据我了解，Higher-Order-Component 在组件或库之间添加了一个附加层，以便更好地重用代码。
例如，您有一个库文件“User.class.js”，它负责检索/存储用户数据，它被不同的组件使用。当“User.class.js”被修改，方法名改变，或参数改变。你要做什么？对所有这些组件应用更改？如果它被 100 个甚至更多不同的组件使用会怎样？使用高阶组件，您只需将更改应用到一个文件。
【讨论】：
HOC 的优点：
在您的应用程序/项目中可重复使用：
// withShowSupport.js
export default Component => props =>
!props.show
? null
: <Component { ...props } />
简单的测试
回复：
https://www.robinwieruch.de/gentle-introduction-higher-order-components/
【讨论】：
根据定义：
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 中，我们像 const ListWithLoading = WithLoading(List); 和 <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} /> 这样调用 HOC，其中 List 是传递给 HOC 的组件。基于sLoading 道具，显示符号。另一件有趣的事情是 HOC 没有渲染方法！因为它的功能很简单！
【讨论】：
新技术可以使我们的生产力更加高效和有效。但是，当然，它也会增加资源使用率。
我没有足够的知识来解释更多，但我可以给你一个简单的研究案例。
我有一个由多个页面组成的 react 应用程序（> 10 页怎么样？）。我想在呈现每个页面时做一些事情（换句话说，页面更改）。 if-else 条件渲染？没办法！
实际上，您可以创建一个名为 withBase 的 HOC 来包装每个页面（在导出页面组件时使用它，例如 export default withBase(Home)）。 withBase 将执行指示页面已更改的函数。
【讨论】：
高阶组件允许您将多个组件中通用的功能或数据应用到一个组件，并将返回一个 new 组件，其中包含 HoC 的功能或数据。
至于优点或缺点。完全取决于您要解决的情况和问题。您还需要执行一长串测试，因为时间太接近了，无法真正说一个比另一个快。此外，这看起来像是在您的本地，因此在生产服务器上可能是完全不同的故事。
但是在您的情况下，您是否将任何额外功能应用于您的 <Loader /> 组件？如果您不是，或者该功能不会在其他任何地方使用，那么在您的情况下可能没有必要使用 HoC。
【讨论】：