React中Map渲染大量数据加载过慢的替代方案咨询

针对你一次性渲染200+条数据导致加载慢的问题，下面是几个切实可行的优化方法，结合你的代码给出具体实现：

1. 虚拟滚动（最推荐） #

虚拟滚动只渲染当前视口内的元素，不管总数据量多大，DOM节点数量始终维持在可视范围内（比如10-20个），能大幅降低首次渲染的DOM开销。

可以用react-window轻量库实现，步骤如下：

首先安装依赖：

npm install react-window

修改你的代码：

import { FixedSizeList as List } from 'react-window';
import React from 'react';

// 抽离单个课程组件，方便复用和优化
const CourseItem = React.memo(({ course }) => {
  return (
    <div className="force-overflow">
      <p 
        className={`eventsDetailsOnBox_text ${course.registrationLink ? 'isClickableEvent' : ''}`}
        onClick={() => RedirectToPage(course.registrationLink)}
      >
        {course.courseName}
      </p>
    </div>
  );
});

function getEventDetails(){
  const formattedDay = day.format("DD-MM-YYYY");
  const eventsOnDay = eventsCountandDate.find(evt => evt.date === formattedDay);

  if (!eventsOnDay || eventsOnDay.courseCount <= 0) return null;

  const courses = eventsOnDay.courses;
  // 每个列表项的高度，根据你的样式调整
  const ITEM_HEIGHT = 40;

  return (
    <div className="eventDetailsBox" style={{ height: '400px', overflow: 'auto' }}>
      <List
        height={400} // 列表容器高度
        itemCount={courses.length}
        itemSize={ITEM_HEIGHT}
        width="100%"
      >
        {({ index, style }) => (
          <div style={style}>
            <CourseItem course={courses[index]} />
          </div>
        )}
      </List>
    </div>
  );
}

2. 分页加载 #

把数据分成多页，每次只渲染当前页内容，用户通过分页按钮或滚动加载下一页。

示例实现：

import { useState } from 'react';

const CourseItem = React.memo(({ course }) => {
  return (
    <div className="force-overflow">
      <p 
        className={`eventsDetailsOnBox_text ${course.registrationLink ? 'isClickableEvent' : ''}`}
        onClick={() => RedirectToPage(course.registrationLink)}
      >
        {course.courseName}
      </p>
    </div>
  );
});

function getEventDetails(){
  const formattedDay = day.format("DD-MM-YYYY");
  const eventsOnDay = eventsCountandDate.find(evt => evt.date === formattedDay);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 20; // 每页显示20条

  if (!eventsOnDay || eventsOnDay.courseCount <= 0) return null;

  const courses = eventsOnDay.courses;
  // 计算当前页的数据
  const startIndex = (currentPage - 1) * pageSize;
  const currentCourses = courses.slice(startIndex, startIndex + pageSize);
  const totalPages = Math.ceil(courses.length / pageSize);

  return (
    <div className="eventDetailsBox">
      {currentCourses.map((course) => (
        <CourseItem key={course.id} course={course} /> // 记得加唯一key
      ))}
      {/* 分页按钮 */}
      <div className="pagination">
        <button 
          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
          disabled={currentPage === 1}
        >
          上一页
        </button>
        <span>{currentPage}/{totalPages}</span>
        <button 
          onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
          disabled={currentPage === totalPages}
        >
          下一页
        </button>
      </div>
    </div>
  );
}

3. 组件重渲染优化 #

即使不做虚拟滚动或分页，也可以通过优化组件避免不必要的重渲染：

• 把单个课程的渲染逻辑抽成独立组件，用React.memo包裹，只有当course属性变化时才重新渲染
• 给map渲染的元素加上唯一的key（比如课程ID），帮助React识别元素变化，减少DOM操作

修改后的单个组件：

const CourseItem = React.memo(({ course, onRedirect }) => {
  return (
    <div className="force-overflow">
      <p 
        className={`eventsDetailsOnBox_text ${course.registrationLink ? 'isClickableEvent' : ''}`}
        onClick={() => onRedirect(course.registrationLink)}
      >
        {course.courseName}
      </p>
    </div>
  );
});

在原组件中使用：

{eventsOnDay.courses.map((course) => (
  <CourseItem 
    key={course.id} // 必须加唯一key
    course={course} 
    onRedirect={RedirectToPage} 
  />
))}

4. 数据预处理优化 #

如果API返回的数据量很大，可以在请求阶段就按日期过滤数据，而不是拿到所有数据后再前端find。比如请求API时带上日期参数：

// 示例API请求
fetch(`/api/events?date=${formattedDay}`)
  .then(res => res.json())
  .then(data => {
    // 直接拿到当天的课程数据，无需前端过滤
    setEventsOnDay(data);
  });

这样能减少前端需要处理的数据量，降低内存占用和渲染压力。

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