jquery - 虚拟 DOM 和真实 DOM 不同步

Question

最近，我们想在React中实现一些动画，这就是我们想要的:当发生某些事情时(从webSocket接收到消息)，重新排序react组件列表。在我的例子中，只有一个项目的位置列表中的项目将会发生变化。因此，首先，将项目从原始位置淡出，然后将其淡入到正确的位置。我的解决方案是使用JQuery删除和添加相应的项目DOM，因为它很容易实现动画(淡入和淡出)，同时我还更新了底层数据结构(React依赖渲染)正确期望使React根据下次emitChange时的状态正确渲染DOM。但是，即使底层数据结构正确，React也不能按预期工作，顺序仍然困惑有趣的是，当我检查 Chrome 中的 React 插件时，React 组件的顺序是正确，但是，当我检查真实的 DOM 时，顺序是不正确的。显然，两个 DOM 是 >不同步

有办法解决吗？

此外，我阅读了React附加组件的动画部分，但是，我认为它是有限的，当我重新排序列表时，动画不适用。如果有一种 react 方式来实现这一点，我将不胜感激

Answer 1

在使用 React 时，我们永远不应该直接更改 DOM。
由于 React 的工作原理，使用 jQuery 或使用 Document.getElementById() 来操作 DOM 并不是一个好的做法。
React 根据代码中的渲染方法构建虚拟 DOM(DOM 的内存中表示)。当UI状态发生变化时，再次调用render并创建一个新的虚拟DOM，将其与之前版本的虚拟DOM进行比较，然后在实际DOM中仅修改差异。计算并实现将旧 DOM 转换为新 DOM 所需的最少步骤。修改真实的 DOM 是昂贵的。

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

因此，当你除了使用 React 之外还使用 jquery 来更改 DOM 时，React 会感到困惑，因为真实的 DOM 与它期望的不同。尝试仅通过react(即渲染方法)修改DOM，并且不会弹出此错误。

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

此外，由于您要重新排序列表，因此您应该记住有关 React 工作原理的一些事情。 React 在列表方面采用了一种非常幼稚的方法。它同时检查两个列表，并在出现差异时生成突变。因此，在顶部插入一个元素将导致 React 进行 n 次突变。其中 n 是列表中元素的数量。

这是通过向元素添加一个称为键的附加属性来解决的。列表中元素的键必须是唯一的。 React 会知道只比较具有相同键的元素而不发生变异。它会重新排序。 https://facebook.github.io/react/docs/reconciliation.html#problematic-case

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