Question

编辑：似乎问题不在于加载部分，但它实际上是反应，不喜欢处理这么多元素。我会尽快更新这篇文章的详细信息有机会确认发生了什么。我的第一个测试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 和 React concurrent mode 会很有帮助

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

1 个答案: