虚拟DOM与真实DOM脱节

Question

最近，我们想要在React中实现一些动画，下面是我们想要的:当发生了什么事情(接收到来自webSocket的消息)，重新排序一个react component.In my的列表时，列表中的项目的一个位置将首先更改.So，然后将项目从原始位置淡出，然后将其淡出到正确的位置。我的解决方案是使用JQuery删除和添加相应的项目DOM，因为它很容易实现动画(淡入和淡出)，同时我还正确地更新了底层数据结构(它依赖于呈现)，希望在emitChange next time.However时根据状态正确地使React正确，即使底层数据结构正确，React也不像预期的那样工作，令人感兴趣的部分仍然是当我检查Chrome中的React插件时，react组件的顺序是正确的，然而，当我检查真实的DOM时，顺序是incorrect.Apparently，这两个DOM是不同步的

有办法解决吗？

此外，我还阅读了React插件的动画部分，但是，我认为它是有限的，当我重新排序列表时，动画不应用.I就会意识到如果有一种反应方式来实现这一点。

Answer 1

在使用react时，我们不应该直接更改DOM。

使用jQuery或使用Document.getElementById()操作DOM并不是一个很好的实践，因为react是如何工作的。

React基于代码中的呈现方法构造虚拟DOM (DOM的内存中表示)。当UI状态发生变化时，将再次调用render，并创建一个新的虚拟DOM，并将其与以前版本的虚拟DOM进行比较，然后只修改实际DOM中的差异。计算并实现了将旧DOM转换为新DOM所需的最小步骤数。修改真正的DOM非常昂贵。

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

因此，当您使用jquery更改DOM时，除了响应之外，react会感到困惑，因为真正的DOM与它所期望的不同。尝试仅通过react (即呈现方法)修改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的方法:)