在React中实现一个高阶组件（HOC），用于在组件加载时显示加载 spinner

Question

如何在React中实现一个高阶组件（HOC），用于在组件加载时显示加载 spinner，并处理异步数据加载？我正在使用React开发一个应用，并且希望创建一个高阶组件（HOC），可以在任何组件加载时显示一个加载 spinner，并处理异步数据加载。这个HOC应该能够接受一个函数，该函数负责fetch数据，并在数据加载完成后再渲染包裹的组件。

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在React中，高阶组件（Higher-Order Components, HOC）是一种非常有用的模式，用于复用组件逻辑。你可以创建一个HOC来处理异步数据加载并在加载过程中显示一个spinner。下面是如何实现这一功能的步骤：

1. 创建一个HOC：首先定义一个高阶组件，它接收一个WrappedComponent作为参数。
2. 处理异步数据加载：在HOC内部管理状态和生命周期方法，以处理数据加载。
3. 显示Spinner：当数据正在加载时，显示一个spinner。
4. 渲染包裹组件：一旦数据加载完成，渲染包含数据的WrappedComponent。

实现步骤

1. 创建HOC

import React, { Component } from 'react';

function withDataLoader(WrappedComponent) {
    return class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                data: null,
                isLoading: true,
                error: null
            };
        }

        componentDidMount() {
            this.fetchData();
        }

        fetchData = async () => {
            try {
                const response = await fetch('YOUR_API_ENDPOINT');
                const data = await response.json();
                this.setState({ data, isLoading: false });
            } catch (error) {
                this.setState({ error, isLoading: false });
            }
        };

        render() {
            const { data, isLoading, error } = this.state;

            if (isLoading) {
                return <div>Loading...</div>; // 显示加载spinner
            }

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

            return <WrappedComponent {...this.props} data={data} />;
        }
    };
}

2. 使用HOC

现在你可以将这个HOC应用到任何需要异步数据加载的React组件上：

const MyComponent = ({ data }) => (
    <div>
        <h1>Data Loaded</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
);

// 使用withDataLoader HOC
export default withDataLoader(MyComponent);

关键点总结

• 状态管理：使用state来管理数据、加载状态以及错误信息。
• 生命周期方法：componentDidMount生命周期方法用于触发数据加载。
• 错误处理：通过catch块捕获并处理错误。
• 条件渲染：根据加载状态和错误信息决定是否显示spinner或错误消息。

这种方法使得你的React组件更加简洁，并且可以轻松地复用加载逻辑。