为什么要使用高阶组件

Question

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

如果通讯录数组为空，将显示加载程序，否则将显示通讯录。

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

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

与之相比，我知道使用高阶组件比简单循环需要更多时间。

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

Answer 1

高阶组件使您可以将许多组件中共有的功能或数据应用于该组件，并将返回一个new组件，其中包含HoC的功能或数据。

关于优点或缺点。将完全取决于您要解决的情况和问题。您还需要执行一长串测试，因为时间太短了，以至于无法真正说出一个比另一个更快。同样，这看起来像在您的本地计算机上，因此生产服务器上的情况可能完全不同。

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

ReactJS - Higher Order Components

Answer 2

新技术可以使我们变得越来越高效。但是，当然，这也会增加资源的使用。

我没有足够的知识来解释更多，但是我可以给您简单的学习案例。

我有一个包含几个页面的React应用程序（> 10个页面呢？）。当每个页面都呈现后，我想做些事情（换句话说，页面更改）。如果其他条件渲染？不可能！

实际上，您可以创建一个名为 { "id": 3, "username": "a", "email": "a@abc.com", "userFunction": "4", "password": "****", "superior": { "id": 2, "username": "b", "email": "b@abc.com", "userFunction": "3", "password": "****", "superior": { "id": 1, "username": "c", "email": "c@abc.com", "userFunction": "1", "password": "****", "superior": null, }, }, } struct UserStructure: Decodable { var id: Int64? var username: String? var email: String? var userFunction: UserFunctionStructure? var password: String? var superior: UserStructure? } func fetchUser(username: String){ let urlString = "http://localhost:8080/rest/user/" + username let url = URL(string: urlString)! URLSession.shared.dataTask(with: url) { (data, response, error) -> Void in if error != nil { print(error!) return } guard let data = data else { return } do { let user = try JSONDecoder().decode(UserStructure.self, from: data) print(user) } catch let err { print(err) } }.resume() } 的HOC，该HOC将包装每个页面（在导出页面组件（例如withBase）时使用它）。 export default withBase(Home)将执行一个指示页面已更改的功能。

DEMO

Answer 3

As per definition :

HOC is a function that accepts your component as an argument and returns a new function that adds some feature to the component.

A simple use case is - when you call an API to fetch some data and use them to render some content in your application, we need to show some kind of progress bar, loading indicator, etc to tell users that data is being fetched. We can use HOC for that purpose.A sample code goes here

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

the above is App.js file and below is the HOC component 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;

so in App.js, we are calling HOC like const ListWithLoading = WithLoading(List); and <ListWithLoading isLoading={this.state.loading} repos={this.state.repos} />, Where List is the component which is passing into the HOC. based on the sLoading prop, loding symbol is shown. Another one interesting thing is HOC dont have a render menthod! beacuse its a simple function !

Answer 4

pros for HOC:

extremly reusable around your app/projects:

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

easy testing

res:

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

Answer 5

据我了解，Higher-Order-Component在组件或库之间添加了一个附加层，以实现更好的代码重用。

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