Reactjs：防止重新渲染重新定位的节点

我有一个160个正在渲染的项目的画廊。用户可以对库中的项目进行排序和分组。排序基本上是即时的，因为没有一个项目被重新渲染。然而，当我对项目进行分组时，React认为每个项目都需要重新呈现（看起来甚至不像调用了shouldComponentUpdate），这需要几秒钟的时间

基本结构如下所示：

<div key="gallery">
   <div key="item1" ... />
   <div key="item2" ... />
   <div key="item3" ... />
</div>

分组后，它变成：

<div key="gallery">
   <div key="group1" .../>
   <div key="group1-gallery">
     <div key="item1" ... />
     <div key="item2" ... />
   </div>   
   <div key="group2" .../>
   <div key="group2-gallery">
     <div key="item3" ... />
   </div>  
</div>

---

项目本身根本没有改变。是否有任何方法可以说服您重新使用现有物品？我是否应该使用不同的结构或其他方式来提供反应提示？

使用浏览器的探查器时，热点在哪里？不管怎样，我都不会期望它需要几秒钟。考虑到您对DOM在结构上所做的重大更改，我不确定在分组过程中您能做多少来保留元素。问题一定出在别的地方。关于暗示React，我也不认为这是可能的，因为您已经更改了树。关于您的性能问题，您是否尝试过使用React的产品构建？（

process.env.NODE\u env==“生产”

）。一些计算，如propTypes验证，在处理数百个组件时可能会占用大量时间。谢谢，我不认为开发构建会增加这么多开销。转向生产肯定帮了大忙。看起来最后一个热点是每个画廊项目都需要订阅活动。这和相关的拆卸将占用剩余渲染时间的20%左右。我可以在更高的级别订阅，但它只是需要重新渲染的项目，下一个有意义的地方是大约4级以上。把道具传那么远似乎很脆弱。