2

编辑：似乎问题不在于加载部分，但实际上是反应不喜欢处理这么多元素。一旦我有机会确认发生了什么，我会尽快更新这篇文章的详细信息。我的第一个测试 JSON 是一堆重复的条目（所以我的文件需要一些时间来加载）触发了一些组件渲染，我的 Json 中有大约 40000 个条目。使用仅包含 3 个条目的新 json 进行测试，每个条目都有很多嵌套数据，所以我的文件仍然很重并且需要一些时间来加载，确实解决了这个问题。

我完全不明白这是怎么可能的：我有一个 json，我正在http://code.pensionsmilitaires.com/codes上加载

在加载期间，圆形路径元素没有动画。只需等待 json 完成加载即可看到相同的 ProgressBar 动画正确...

这是我的渲染功能

render() {
  console.log("Rendering");
  if (this.state.codes.length < 1) {
    return (
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
    );
  }
  return (
    <div>
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
       <h2>Liste des codes disponibles</h2>
      <div>
        {this.state.codes.map((code, i) => (
          <CodeSummary key={i} code={code}/>
        ))}
      </div>
    </div>
  );
}

如果有人知道我该如何解决这个问题，那就太棒了！无论如何感谢您阅读我的问题^^

4

1 回答 1

0

所以几年后，只是为了确保任何有同样问题的人都能得到答案。

React 实际上正忙于渲染数千个元素，这冻结了基于 JavaScript 的 svg path-offset 动画，直到 React 释放线程。

结果，在 React 完成渲染之前，圆形进度条没有动画。

在这种情况下，你必须渲染大量的东西，窗口化或虚拟化一个长列表，React 并发模式会很有帮助

于 2021-02-28T06:51:53.113 回答