【React】修改原引用时警惕返回新引用

前言

• 我们知道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个情况，首先考虑是不是有方法返回了不同引用。