为什么使用高阶分量

高阶组件允许您将多个组件中常见的功能或数据应用于组件,并将返回 new

<Loader /> 组件?如果您没有或者该功能不会在其他任何地方使用,那么在您的情况下可能不需要使用HoC。

ReactJS - Higher Order Components

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

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

我有一个react应用程序,它由几页组成(10页怎么样?)。我想在每个页面被呈现时做些什么(换言之,页面更改)。如果还有条件渲染?不可能!

实际上,您可以将HOC命名为 withBase 它将包装每个页面(在导出页面组件时使用,例如。 export default withBase(Home) ). 带底座 将执行指示页已更改的函数。

DEMO

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} />
    )
  }
}

以上是应用程序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;

所以在应用程序js,我们称之为HOC const ListWithLoading = WithLoading(List); 和 <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} /> ,其中 List sLoading 道具,显示loding符号。另一件有趣的事是HOC没有渲染方法!因为它的功能很简单!

HOC的优点:

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

容易测试

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

据我所知,高阶组件在组件或库之间添加了一个附加层,以便更好地重用代码。

例如,您有一个库文件“用户.class.js“它负责检索/存储用户数据,并由不同组件使用。“当”用户.class.js“”被修改、方法名更改或参数更改。你要怎么办?对所有这些组件应用更改?如果它被100个不同的组件使用,甚至更多呢?对于高阶组件,只需将更改应用于一个文件。