Javascript ReactJS：渲染100个div而不出现任何渲染打嗝

我有一个渲染100个div的组件：

  return (hive.map((hex)=>
          <div
            key={hex.id}
            id={hex.id}
            className={`hex hex-zoom-out`}
            style={{ width: hex.width, height: hex.height, top: hex.top, left: hex.left }}
            dangerouslySetInnerHTML={createMarkup(hex.html)}
            onClick={(e)=>hex.link ? window.open(hex.link, "_blank") : console.log(e.target.style)}
            onMouseOver={(e)=>hex.link ? '' : e.target.style.cursor = 'default'}
            onMouseEnter={(e)=>startAnimation(e)}
          />
      )

return（hive.map（（十六进制）=>
hex.link？window.open（hex.link，“_blank”）：console.log（e.target.style）}
onMouseOver={（e）=>hex.link？''：e.target.style.cursor='default'}
onMouseCenter={（e）=>startAnimation（e）}
/>
)

问题：在获取填充数组的数据之前，我有一个动画加载程序图标可见。一旦获取数据，该图标将淡出，然后dom呈现100个div。此时加载程序淡出时会有一点结巴。这是一个小问题，但因为我正在尝试以图形方式使其愉快g看到这个问题很烦人

我想逐渐地在屏幕上添加div（这对我来说是可以接受的）

---

我尝试过使用一些超时，但没有成功。

使用？可能会有帮助。您是否验证过它在产品构建中闪烁？有时，当您删除开发构建中的所有开发帮助程序时，您会看到在外部空白处有一些性能改进…您尝试过窗口化吗？更多信息，请访问