React渲染超大的字符串

javascript 复制代码
import React, { useState, useEffect, useRef } from 'react';

const BigTextViewer = ({ text, chunkSize = 10000 }) => {
  const [visibleChunks, setVisibleChunks] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const containerRef = useRef(null);

  useEffect(() => {
    if (currentIndex * chunkSize >= text.length) return;

    const renderNextChunk = () => {
      const start = currentIndex * chunkSize;
      const end = Math.min(start + chunkSize, text.length);
      const chunk = text.substring(start, end);

      setVisibleChunks((prev) => [...prev, chunk]);
      setCurrentIndex((prev) => prev + 1);
    };

    // 使用requestAnimationFrame进行分批渲染
    if (currentIndex < 100) {
      // 初始快速渲染
      requestAnimationFrame(renderNextChunk);
    } else {
      // 后续慢速渲染,避免阻塞
      setTimeout(renderNextChunk, 0);
    }
  }, [currentIndex, text, chunkSize]);

  return (
    <div ref={containerRef} className="min-h-full whitespace-pre-wrap p-4 border rounded">
      {visibleChunks.map((chunk, index) => (
        <span key={index}>{chunk}</span>
      ))}
    </div>
  );
};

export default BigTextViewer;

在 React 里把一个超大的字符串分块渲染出来,避免一次性渲染导致浏览器卡顿

拆解一下逻辑 👇


📌 主要思路

  1. 分块切割字符串

    • chunkSize(默认 10000 个字符)把大文本切成一段一段。
    • 每次只渲染一段,而不是整个文本。
  2. 逐步渲染

    • requestAnimationFrame 在前 100 个分块时快速渲染(保证用户很快看到内容)。
    • 超过 100 块后,改用 setTimeout(异步队列)继续加载,避免主线程被长时间占用。
  3. 状态管理

    • visibleChunks 存储已经渲染的字符串块。
    • currentIndex 记录当前渲染到第几块。
  4. 渲染输出

    • 每个 chunk 作为一个 <span> 渲染,最终拼接成完整的大文本。
    • whitespace-pre-wrap 让空格和换行格式保持不变。

📌 执行过程

  • 初始 currentIndex = 0
  • useEffect 检查是否还有没渲染的块 → 切下一块 → 更新状态 → currentIndex + 1
  • 组件重新渲染 → useEffect 再次运行 → 继续下一块
  • 循环直到所有 chunk 渲染完。

📌 使用场景

  • 大日志文件预览
  • 代码文件(几十 MB)在线展示
  • 逐步加载长文本(小说、爬虫抓取的长文章)

📌 优点

✅ 不会卡死页面(因为分批渲染)。

✅ 用户能很快看到前面的内容,而不是等完整数据。

✅ 可调 chunkSize 控制性能 vs 流畅度。


📌 局限

⚠️ 所有渲染出来的内容还是会一直留在 DOM 里,超大文本(几百 MB)会造成 DOM 数量过多,拖慢滚动性能。

👉 如果是这种情况,就得结合 虚拟列表react-window / react-virtualized)来做。


相关推荐
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇4 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15885 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪6 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长6 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH6 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴6 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30737 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构