如何为测试实现组件延迟渲染？附Loading组件与react-loadable代码

嘿，我来帮你搞定组件延迟渲染的需求！结合你现有的Loading组件，用react-loadable就能轻松实现「只有当组件加载耗时超过设定阈值时才显示Loading」的效果，避免短时间加载时的闪烁问题。

第一步：确保安装react-loadable #

首先确认你已经安装了react-loadable，如果还没装，执行下面的命令：

npm install react-loadable
# 或者用yarn
yarn add react-loadable

第二步：修正你的Loading组件小问题 #

我注意到你现有Loading组件里有个小bug——解构了message参数，但渲染时用了props.message，会导致报错，先把这个修正过来：

import React from 'react';
import './Loading.sass';

const Loading = ({ message, pastDelay }) => {
  if (pastDelay) {
    return (
      <div className="loading-bro">
        <h1>{message}</h1>
        <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
          <circle id="loading-inner" cx={75} cy={75} r={60} />
        </svg>
      </div>
    );
  } else {
    return null;
  }
};

export default Loading;

第三步：用React Loadable包裹目标组件 #

接下来，把你需要延迟渲染的组件用Loadable包裹起来，通过配置delay参数来设置延迟阈值（比如300ms，你可以根据需求调整）：

import React from 'react';
import Loadable from 'react-loadable';
import Loading from './Loading'; // 导入你的Loading组件

// 定义需要异步加载的目标组件
const AsyncTargetComponent = Loadable({
  // 动态导入目标组件
  loader: () => import('./TargetComponent'), // 替换成你实际的组件路径
  // 指定加载时显示的组件
  loading: Loading,
  // 设置延迟时间：只有加载耗时超过300ms时，才会让Loading的pastDelay变为true
  delay: 300,
  // 给Loading组件传递额外props
  loadingProps: {
    message: '正在加载中...'
  }
});

// 在你的应用中使用这个异步组件
const App = () => {
  return (
    <div>
      <AsyncTargetComponent />
    </div>
  );
};

export default App;

关键逻辑说明 #

• delay参数：设置的是「等待多久后才显示Loading」的阈值，比如300ms。如果目标组件在300ms内加载完成，Loading组件的pastDelay会一直是false，不会渲染任何内容；只有当加载时间超过300ms时，pastDelay才会变为true，Loading才会显示出来。
• loadingProps：用来给你的Loading组件传递自定义参数，比如这里的message，你可以根据需要添加更多属性。

可选扩展：处理加载错误 #

如果需要处理组件加载失败的情况，可以给Loading组件添加error属性，扩展一下：

const Loading = ({ message, pastDelay, error }) => {
  if (error) {
    return <div className="loading-bro">加载失败，请稍后重试</div>;
  }
  if (pastDelay) {
    return (
      <div className="loading-bro">
        <h1>{message}</h1>
        <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
          <circle id="loading-inner" cx={75} cy={75} r={60} />
        </svg>
      </div>
    );
  } else {
    return null;
  }
};

这样就完整实现了组件的延迟渲染功能啦！

内容的提问来源于stack exchange，提问作者Harry Blue