React 工具箱 - Circular ProgressBar 仅在加载时动画旋转 JSON

Question

编辑：看来问题不在加载部分，但实际上是反应不喜欢处理这么多元素。我会更新这个post 一旦我有机会确认正在发生的事情，我就会提供详细信息。我的第一个测试 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>
  );
}

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

Answer 1

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

React 实际上正忙于渲染数千个元素，这会冻结基于 JavaScript 的 svg 路径偏移动画，直到 React 释放线程。

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

在需要渲染大量内容的情况下，windowing, or virtualizing a long list and React concurrent mode 会很有帮助

React 工具箱 - Circular ProgressBar 仅在加载时动画旋转 JSON

React toolbox - Circular ProgressBar only animating rotation while loading JSON

reactjs

react-toolbox