前言
- 我们知道react是提倡每次更新返回一个新引用的,实际不返回新引用也是可以的,只要自己手动更新即可,我这次写个拖拽树组件时只在原引用上修改,手动更新,结果产生了个bug。
bug现象
- 这个现象是在组件卸载后重新进入产生的,组件未卸载时一切正常。当组件卸载后再次进入,会导致key重复。产生多个相同树列表项。
解决方案
- 源码我就不放了,这组件写的还是挺长的,就说关键地方,就是我有个修改父亲的方法,因为拖拽会改变树的层级,所以对应的,需要先脱离自己父亲。就是这个脱离自己父亲方法里原本这么写的:
parent.children = parent.children.filter((v) => v !== origin);
- 这个方法很常用,结果它返回的并不是原引用,而是新引用,导致节点会复制好多份出来。
- 我后面使用splice来解决这问题:
const index = parent.children.indexOf(origin);
if (index > -1) {
parent.children.splice(index, 1);
}
-
这样就无问题了。
-
这个拖拽树,很多人写都有bug,比如200多star的vue-drag-tree直接父级往子集拖动就会有bug,还是自己写比较好,此外,自己写还可以使用扁平数据结构,可以支持虚拟列表,这个不是本文重点。
总结
- react里一个功能中要么就全返回不同引用,要么就全返回相同引用。返回不同引用可以让问题简单很多,有些情况,返回相同引用可能会更简单,但一定要注意自己使用的各种方法,如果有相同节点变为n个情况,首先考虑是不是有方法返回了不同引用。