虚拟DOM和真实DOM不同步

Question

最近，我们想在React中实现一些动画，这就是我们想要的：当发生某件事（从webSocket接收消息）时，重新排列React组件的列表。在我的情况下，列表中该项目只有一个位置将被更改。因此，首先从原始位置淡出该项目，然后将其淡入正确的位置。我的解决方案是使用JQuery删除并添加相应的项目DOM，因为它易于实现动画（淡入和淡出），同时我还正确地更新了底层数据结构（React依赖于此渲染）以期望使React下次再次基于emitChange时的状态正确渲染DOM。但是，即使基础数据结构正确，React仍无法按预期工作，顺序仍然混乱。有趣的是，当我在Chrome中检查了react插件时，正确，但是，当我检查真实的DOM时，顺序是不正确的。显然，两个DOM 不同步

有办法解决吗？

另外，我阅读了React加载项的动画部分，但是，我认为它是有限的，当我重新排序列表时，动画不适用。如果有实现此目标的反应方法，我将不胜感激

Answer 1

在使用react时，我们永远不要直接更改DOM。
使用jQuery或Document.getElementById()操纵DOM并不是一个好习惯，因为它是如何工作的。
React根据代码中的render方法构造一个虚拟DOM（DOM的内存表示形式）。而且，当UI状态更改时，将再次调用render并创建一个新的虚拟DOM，并将其与虚拟DOM的先前版本进行比较，然后仅在实际DOM中修改差异。计算并实现了将旧DOM转换为新DOM所需的最少步骤。修改实际的DOM是昂贵的。

https://facebook.github.io/react/docs/reconciliation.html#motivation

因此，当您使用jquery来更改DOM来进行响应时，React会感到困惑，因为实际DOM与预期的有所不同。尝试仅通过react（即render方法）修改DOM，并且不会弹出此错误。

因此，如果您真的必须直接接触各个元素，则可以使用引用。https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

另外，由于您要对列表进行重新排序，因此应记住一些有关反应如何工作的信息。当涉及到列表时，React采用非常幼稚的方法。它会同时遍历两个列表，并且每当有差异时都会生成一个突变。因此，在顶部插入一个元素将导致反应进行n个突变。其中n是列表中元素的数量。

这可以通过向元素添加称为键的附加属性来解决。列表中元素的键必须唯一。React会知道只将元素与相同的键进行比较，而不进行突变。它将重新排序。 https://facebook.github.io/react/docs/reconciliation.html#problematic-case

而且，除了从DOM中删除元素并重新插入之外，还可以通过CSS将其可见性设置为隐藏。display:none通过反应自身，并在重新排序后将其更改回。
或从状态更改触发的反应中使用CSS动画。
或使用查找一些反应动画库。
基本上找到一种仅使用react :)修改DOM的方法