前端伪进度条实现(仿antd message使用react组件静态方法)

背景

react项目中, 有些页面加载很慢, 为了提升用户体验, 需要在前端做一个伪进度条, 并且把这个伪进度条封装成一个组件, 提供给多个项目使用.

这个伪进度条有以下特点:

1. 基于antd组件进行二次开发. 利用 antd 的 Spin, Progress 组件开发, 减少工作量.
2. 在进度条走到 99% 的时候会卡住, 等拿到响应的时候完成.
3. 考虑到要把这个伪进度条封装成组件, 所以最好是用类似 message.info() 这种方法调用, 不然不好对响应之后的组件状态进行改变. 因此要用到react组件的静态方法.
4. 我用的函数组件 (当然用类组件也是可以的).

实现方法

(一) react组件静态方法

这种方式感觉平常开发很少用到, 放一个 gpt 给的示例:

React组件中使用静态方法可以有多种方式。下面是一个使用静态方法的React组件示例：

import React from 'react';

class MyComponent extends React.Component {
   
   
  static myStaticMethod() {
   
   
    console.log('This is a static method.');
  }

  render() {
   
   
    return (
      <div>
        {
   
   /* 组件内容 */}
      </div>
    );
  }
}

// 在其他地方调用静态方法
MyComponent.myStaticMethod();

export default MyComponent;

在上面的代码中，myStaticMethod是一个静态方法，可以直接通过组件类名调用，例如MyComponent.myStaticMethod()。

请注意，在React组件的静态方法中，无法访问组件的实例属性或实例方法，因为静态方法是属于类本身的，而不是实例。

另外，你也可以使用ES6的类静态属性语法来定义静态方法：

import React from 'react';

class MyComponent extends React.Component {
   
   
  static myStaticMethod = () => {
   
   
    console.log('This is a static method.');
  }

  render() {
   
   
    return (
      <div>
        {
   
   /* 组件内容 */}
      </div>
    );
  }
}

// 在其他地方调用静态方法
MyComponent.myStaticMethod();

export default MyComponent;

以上是在类声明中定义的静态方法，也可以在函数式组件中使用静态方法。下面是一个函数式组件中使用静态方法的示例：

import React from 'react';

function MyFunctionalComponent() {
   
   
  return (
    <div>
      {
   
   /* 组件内容 */}
    </div>
  );
}

MyFunctionalComponent.myStaticMethod = () => {
   
   
  console.log('This is a static method.');
};

// 在其他地方调用静态方法
MyFunctionalComponent.myStaticMethod();

export default MyFunctionalComponent;

我习惯用函数组件, 所以采用了函数组件的静态方法写法.
再加上使用了 antd 的 Spin 和 Progress 组件, 得到了下面的组件代码:

import React,{
   
   useState,useEffect,memo} from 'react';
import {
   
   Progress,Spin} from 'antd';
import './index.css'

const SelfDevProgress = (props)=> {
   
   
    return(
        <div className='outer'>
            <div className='inner'>
                <p>系统正在全力加载中, 请稍后...</p>
                <Spin />
                <Progress percent={
   
   70} status={
   
   "active"}/>
            </div>
        </div>
    )
}

// 静态调用方式
SelfDevProgress.success = (message) => {
   
   
    console.log(message,"success")
}

export default SelfDevProgress;

外部调用:

import React from 'react';
import SelfDevProgess from "./modules/selfDevProgess"

const Main = () => {
   
   
    SelfDevProgess.success("成功提示")
    return(
        <div>
            <p>模块组件页面testtest父页面</p>
            {
   
   /* <SelfDevProgess time={5}/> */}
        </div>
    )
}

export default Main;

css 文件:

.outer {
   
   
}
.inner {
   
   
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 60%