背景

使用拖拽组件进行拖拽排序
1.原展示模块内容需要进行缩略展示，具备收缩展开的能力
2.排序的内容复杂，需要异步获取数据，循环的时候传进去的关键值(如id)作为参数拉取数据，渲染图表

方案一

保留原组件渲染逻辑，同时将数据源传入排序组件（排序组件显示标题类信息代表原模块），
然后根据是否进入排序状态，保留二者其一，就是排序时展示排序组件，非排序时展示模块内容
问题

从排序状态回到正常展示状态时，因为正常展示的组件DOM在进入排序状态时被销毁
这时再回来，相当于从无到有要重新创建，会引起数据重新请求

方案二

将原展示模块组件作为排序组件项进行渲染，在进入排序状态时将展示模块高度减小，仅保留标题部分充当缩略信息展示
因为展示模块DOM始终存在，所以可以解决掉方案一展示模块DOM消失再创建的数据拉取问题
原理

DOM的新建跟更新流程不同，在这种情况下，新建过程会需要去请求接口拉数据，而如果仅仅是更新的话，可以依赖react的key的关键作用减少DOM 的重建过程，只是进行调换顺序即可
这里在将数据源列表渲染出来的时候，将数据的特征值赋值给key，即排序前后，展示模块key不变就不会被重新新建渲染，只是进行排序处理
解决方案一产生的问题

在进入排序状态时，将展示模块组件高度设置为0，overflow：hidden，就看不到展示组件，但DOM 依然存在
这时再使用排序组件展示缩略信息即可

小结

无论哪种方案，在结束排序后，都要更新数据源，但数据源里面的对象不能变，因为展示模块会依赖其中的具体对象里的信息进行数据拉取
即