如何避免React组件加载后处理大JSON导致页面冻结？

核心问题是组件同步处理大JSON时阻塞了主线程，Suspense和Lazy仅解决组件加载问题，无法改善数据处理阶段的性能瓶颈。以下是几个实用的解决办法：

1. 开启组件的虚拟滚动功能 #

uiwjs/react-json-view原生支持虚拟滚动，开启后只会渲染可视区域内的节点，大幅减少DOM渲染和数据处理的压力，这是最直接有效的方案。

示例代码：

import ReactJsonView from '@uiw/react-json-view';

function LargeJsonViewer({ bigJson }) {
  return (
    <ReactJsonView
      src={bigJson}
      virtual={true} // 开启虚拟滚动
      style={{ height: '80vh', overflow: 'auto' }} // 设置固定高度和滚动容器
      collapsed={true} // 默认折叠所有节点，降低初始渲染量
    />
  );
}

2. 用Web Worker异步处理JSON解析/预处理 #

把大JSON的解析和耗时预处理逻辑放到Web Worker中，让主线程专注于UI渲染，完全避免阻塞。

步骤：

• 创建json.worker.js文件：

self.onmessage = (e) => {
  try {
    // 可在此添加过滤、格式化等预处理逻辑
    const parsedJson = JSON.parse(e.data);
    self.postMessage({ type: 'success', data: parsedJson });
  } catch (err) {
    self.postMessage({ type: 'error', error: err.message });
  }
};

• 主组件中使用Worker：

import React, { useState, useEffect } from 'react';
import ReactJsonView from '@uiw/react-json-view';

function LargeJsonViewer({ jsonString }) {
  const [parsedJson, setParsedJson] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL('./json.worker.js', import.meta.url));
    worker.postMessage(jsonString);
    
    worker.onmessage = (e) => {
      if (e.data.type === 'success') {
        setParsedJson(e.data.data);
      } else {
        setError(e.data.error);
      }
      worker.terminate();
    };

    return () => worker.terminate();
  }, [jsonString]);

  if (error) return <div>解析错误：{error}</div>;
  if (!parsedJson) return <div>加载中...</div>;

  return (
    <ReactJsonView
      src={parsedJson}
      virtual={true}
      style={{ height: '80vh', overflow: 'auto' }}
    />
  );
}

3. 分片处理JSON节点，异步渲染 #

如果虚拟滚动仍无法满足需求，可手动分片处理JSON节点，用requestIdleCallback或setTimeout分批渲染子节点，避免一次性处理所有数据。

示例（递归分片处理节点）：

import React, { useState, useEffect } from 'react';
import ReactJsonView from '@uiw/react-json-view';

function processNode(node, callback, delay = 0) {
  return new Promise((resolve) => {
    setTimeout(() => {
      callback(node);
      resolve();
    }, delay);
  });
}

async function processJson(json, callback) {
  if (typeof json === 'object' && json !== null) {
    for (const key of Object.keys(json)) {
      await processNode(json[key], (child) => callback(child, key));
      if (typeof json[key] === 'object') {
        await processJson(json[key], callback);
      }
    }
  }
}

function LargeJsonViewer({ bigJson }) {
  const [processedJson, setProcessedJson] = useState({});

  useEffect(() => {
    let tempJson = {};
    processJson(bigJson, (child, key) => {
      tempJson[key] = child;
      setProcessedJson({ ...tempJson });
    });
  }, [bigJson]);

  return (
    <ReactJsonView
      src={processedJson}
      virtual={true}
      style={{ height: '80vh', overflow: 'auto' }}
      collapsed={true}
    />
  );
}

4. 禁用组件的非必要特性 #

关闭组件的耗时功能，减少数据处理量：

• editable={false}：禁用编辑功能
• enableClipboard={false}：禁用复制到剪贴板
• displayDataTypes={false}：隐藏数据类型提示
• collapsed={2}：默认折叠到第2层节点，而非全部展开

示例：

<ReactJsonView
  src={bigJson}
  virtual={true}
  style={{ height: '80vh', overflow: 'auto' }}
  collapsed={2}
  editable={false}
  enableClipboard={false}
  displayDataTypes={false}
/>

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