创建React高阶组件：作为子组件的加载动画包装器

这个需求非常合理——重复写加载状态逻辑确实很繁琐，用HOC做抽象是绝佳的解决方案。我来给你两种实用的实现思路，帮你彻底解决这个问题。

思路一：拦截子组件的componentDidMount（最小改动现有组件） #

这种方式适合你已经有现成的子组件，只需要给它们快速加上加载动画的场景。核心是让HOC获取到子组件异步请求的Promise，等待它完成后关闭加载。

第一步：实现HOC #

import React, { Component } from 'react';

// 自定义加载组件（可以换成你自己的UI）
const LoadingSpinner = () => (
  <div style={{ 
    position: 'fixed', 
    top: '50%', 
    left: '50%', 
    transform: 'translate(-50%, -50%)',
    fontSize: '1.2rem'
  }}>
    正在加载数据...
  </div>
);

const withLoading = (WrappedComponent) => {
  return class WithLoadingWrapper extends Component {
    state = { isLoading: true };

    componentDidMount() {
      // 通过ref拿到子组件实例，调用它的componentDidMount
      const mountTask = this.wrappedComponent.componentDidMount();
      
      // 判断是否是Promise，等待请求完成
      if (mountTask && typeof mountTask.then === 'function') {
        mountTask
          .then(() => this.setState({ isLoading: false }))
          .catch(err => {
            // 请求失败也要关闭加载，避免卡死
            this.setState({ isLoading: false });
            console.error('数据加载出错:', err);
          });
      } else {
        // 如果子组件没有异步请求，直接关闭加载
        this.setState({ isLoading: false });
      }
    }

    render() {
      if (this.state.isLoading) {
        return <LoadingSpinner />;
      }

      // 传递props并通过ref保存子组件实例
      return (
        <WrappedComponent
          {...this.props}
          ref={comp => this.wrappedComponent = comp}
        />
      );
    }
  };
};

export default withLoading;

第二步：改造你的子组件 #

只需要让子组件的componentDidMount返回异步请求的Promise即可：

import React, { Component } from 'react';
import withLoading from './withLoading';
import axios from 'axios';

class UserList extends Component {
  state = { users: [] };

  componentDidMount() {
    // 关键：返回ajax请求的Promise
    return axios.get('/api/users')
      .then(res => this.setState({ users: res.data }));
  }

  render() {
    return (
      <ul>
        {this.state.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

// 用HOC包裹组件，搞定！
export default withLoading(UserList);

思路二：分离数据请求与组件渲染（更优雅的架构） #

如果你的项目还在初期，或者想做更清晰的关注点分离，可以让HOC负责数据请求，子组件只负责渲染。这种方式下，子组件不需要关心异步逻辑，更纯粹。

实现带数据请求的HOC #

import React, { Component } from 'react';
const LoadingSpinner = () => <div>加载中...</div>;

// HOC接收一个请求函数，再接收组件
const withDataLoading = (fetchData) => (WrappedComponent) => {
  return class WithDataLoading extends Component {
    state = {
      isLoading: true,
      data: null,
      error: null
    };

    componentDidMount() {
      // 调用传入的请求函数，传入props（比如请求参数）
      fetchData(this.props)
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

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

      if (isLoading) return <LoadingSpinner />;
      if (error) return <div>加载失败：{error.message}</div>;

      // 把数据传给子组件渲染
      return <WrappedComponent {...this.props} data={data} />;
    }
  };
};

export default withDataLoading;

使用方式 #

import React from 'react';
import withDataLoading from './withDataLoading';
import axios from 'axios';

// 纯渲染组件，只负责展示数据
const UserList = ({ data: users }) => (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

// 定义请求函数
const fetchUsers = () => axios.get('/api/users').then(res => res.data);

// 组合HOC和组件
export default withDataLoading(fetchUsers)(UserList);

关键注意点 #

• 错误处理：一定要在catch里关闭加载动画，否则请求失败时用户会一直看到加载状态。
• props传递：HOC要把所有接收到的props原封不动传给子组件，避免丢失数据。
• ref的使用：第一种方式里用ref获取子组件实例，是为了调用它的componentDidMount并拿到Promise，确保HOC能感知请求完成。

这两种方式都能帮你彻底消除重复代码，根据你的现有项目情况选一个就行～

内容的提问来源于stack exchange，提问作者i.brod