HOC：React中函数式组件的强大封装器

2023-09-07 22:26:51

React中的高阶组件（HOC）是一种强大的技术，允许你扩展React组件的功能，而无需修改其内部实现。通过将HOC包裹在其他组件周围，你可以添加额外的功能，如状态管理、数据获取或错误处理。

HOC非常适合在多个组件中共享通用逻辑。例如，如果你有几个组件需要访问相同的API端点，你可以创建一个HOC来封装与API交互的逻辑，然后将此HOC应用于需要访问端点的组件。这消除了重复代码并有助于保持代码库的整洁。

理解HOC

HOC本质上是接受组件并返回新组件的函数。新组件具有原始组件的功能，以及HOC添加的任何附加功能。

创建一个HOC

让我们创建一个名为withFetching的HOC，它将数据获取功能添加到任何组件。

import React from "react";

const withFetching = (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: null,
      loading: true,
      error: null,
    };

    componentDidMount() {
      fetch("https://example.com/api")
        .then((res) => res.json())
        .then((data) => this.setState({ data, loading: false }))
        .catch((error) => this.setState({ error, loading: false }));
    }

    render() {
      const { data, loading, error } = this.state;
      return <WrappedComponent {...this.props} data={data} loading={loading} error={error} />;
    }
  };
};

现在，我们可以将withFetching HOC应用于任何组件，以获得数据获取功能。

import React from "react";
import { withFetching } from "./withFetching";

const MyComponent = (props) => {
  const { data, loading, error } = props;

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
};

export default withFetching(MyComponent);