页面大文本崩溃处理

import React, { useEffect, useState } from "react";
 
// 渐进式加载
export const ProgressiveTextLoader = ({ largeString }: { largeString: string }) => {
  const [visibleText, setVisibleText] = useState("");
  const [offset, setOffset] = useState(0);
  const chunkSize = 1024 * 1024; // 定义chunk大小
 
  useEffect(() => {
    const nextOffset = offset + chunkSize;
    setVisibleText(largeString.slice(0, nextOffset));
  }, [offset, largeString, chunkSize]);
 
  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
    const element = event.currentTarget;
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      setOffset((prevOffset) => prevOffset + chunkSize);
    }
  };
 
  return (
    <div onScroll={handleScroll} style={{ overflow: "auto" }}>
      {visibleText}
    </div>
  );
};
 
export default ProgressiveTextLoader;