我在ReactJS中有一个Document组件。该文档组件有10个不同的其他子组件。
<Document>
<Header/>
<Body>
<Image/>
<Paragraph1/>
<Paragraph2/>
<Paragraph3/>
<Paragraph4/>
<Paragraph5/>
<Paragraph6/>
<Paragraph6/>
</Body>
</Document>
段落子组件包含内容，内容中的某些字词在带有？标记的单词旁边有一个“帮助”或“含义”链接。当用户点击？时，会显示bootstrap popover。这些popover可以包含大量内容，所以我决定不使用所有popover组件构建Paragraph组件（我使用react-bootstrap）因为DOM可能很大并且可以影响滚动性能（浏览器的帧率）。 / p>
相反，我考虑在用户点击时再次渲染段落？点击？会触发状态更改，最终会使用弹出窗口呈现段落。使用此方法，在第一次呈现整个文档期间不会创建弹出窗口。
我不确定在ReactJS中做这样的事情的最佳模式是什么？使用所有弹出窗口（大型DOM）生成大型DOM，或仅在用户采取行动（较小的DOM）时创建弹出窗口？