React如何实现组件完全加载就绪后再渲染，避免先显示空内容？

你当前使用的是本地静态数据，不存在数据加载延迟，出现空白的核心原因是项目卡片里的图片资源加载需要时间，图片加载完成前对应区域空白，导致看起来像空组件。可以通过以下方式优化：

方案1：给单项目组件加图片加载状态，加载完成前显示占位/不显示 #

改造后的MyProjectsEachProject组件代码如下：

import React, { useState } from "react";
import "./myProjectsEachProject.css";

function MyProjectsEachProject({
  imagePath,
  imageName,
  name,
  desc,
  previewLink,
  githubLink,
}) {
  // 新增图片加载状态
  const [isImgLoaded, setIsImgLoaded] = useState(false);

  // 如果需要在加载完成前完全不显示组件，直接返回null即可
  // if (!isImgLoaded) return null;

  return (
    <div className="each-project-container">
      {/* 图片加载完成前显示加载占位，可自行替换为骨架屏、加载动画等 */}
      {!isImgLoaded && <div className="project-img-loading">加载中...</div>}
      <div 
        className="each-project-img-container"
        style={{ display: isImgLoaded ? 'block' : 'none' }}
      >
        <img 
          src={imagePath} 
          alt={imageName} 
          onLoad={() => setIsImgLoaded(true)}
        />
      </div>
      <p className="each-project--title">{name}</p>
      <p className="each-project--desc">{desc}</p>
      <div className="each-project--btns-container">
        <a href={previewLink}>Preview</a>
        <a href={githubLink}>GitHub repo</a>
      </div>
    </div>
  );
}

export default MyProjectsEachProject;

方案2：优化主组件筛选逻辑，减少不必要的遍历 #

原主组件遍历所有分类判断匹配的写法性能较差，可直接用find方法筛选出选中分类，优化后的代码如下：

import { useState } from "react";
import MyProjectsEachProject from "./MyProjectsEachProject/MyProjectsEachProject";
import categories from "./MyProjectsEachCategory/MyProjectsCategoriesData";

const MyProjects = () => {
  const [categorySelected, setCategorySelected] = useState(categories[0].title);
  // 直接定位到选中的分类，无需遍历所有分类
  const activeCategory = categories.find(item => item.title === categorySelected);
  const activeProjects = activeCategory ? activeCategory.projects : [];

  return (
    <div className="my-projects-container">
      <div className="projects-to-show-container">
        {activeProjects.map((eachProject) => (
          <MyProjectsEachProject
            key={eachProject.name}
            imagePath={eachProject.imagePath}
            imageName={eachProject.imageName}
            name={eachProject.name}
            relatedCategories={eachProject.relatedCategories}
            desc={eachProject.desc}
            previewLink={eachProject.previewLink}
            githubLink={eachProject.githubLink}
          />
        ))}
      </div>
    </div>
  );
};

export default MyProjects;

两种存储方式都是合理的，根据你的使用场景选择即可：

• 如果你的项目数据不会频繁变动，不需要在不重新打包项目的前提下更新数据，直接用JS导出数组的方式完全可行。这种方式的优势是数据会直接被打包进构建产物，不需要额外发起网络请求，加载速度更快，也不存在请求失败的风险。
• 如果你后续需要支持非开发人员更新项目数据，或者不想每次修改项目数据都重新打包，可以把数据存在public目录下的JSON文件里，通过fetch请求获取；如果后续要对接后台管理系统动态更新数据，再改成调用后端接口即可。

内容的提问来源于stack exchange，提问作者Salo Avalos