виртуальный DOM и реальный DOM не синхронизированы

Question

В последнее время мы хотим реализовать некоторую анимацию в React, вот что мы хотим: когда что-то происходит (получайте сообщение от webSocket), переупорядотите список реагирующих компонентов. В моем случай, только одна позиция элемента в списке будет изменена. Поэтому во-первых, затухайте элемент из исходной позиции, а затем затушите его в нужном месте. Мое решение состоит в том, чтобы удалить и добавить соответствующий элемент DOM с помощью JQuery, потому что легко реализовать анимацию (исчезают и исчезают), а также я обновляю базовую структуру данных (на которую React полагаться на рендеринг), правильно ожидая сделать React визуализировать DOM правильно на основе состояния, когда emitChange в следующий раз. Однако даже если базовая структура данных верна, React не работает, как ожидается, порядок все еще запутан Интересной частью является то, что я проверил реактивный плагин в Chrome, порядок реагирующих компонентов правильно, однако, когда я проверить реальный DOM, порядок incorrect.Apparently, два DOM являются из синхронизации

есть ли способ решить эту проблему?

Кроме того, я прочитал анимационную часть надстройки React, однако, я полагаю, что она ограничена, когда я переупорядочу список, анимация не применяется. Я буду признателен, если есть способ реагирования для достижения этого

Answer 1

При использовании реакции мы никогда не должны менять DOM напрямую.
Использование jQuery или использование Document.getElementById() для управления DOM не является хорошей практикой из-за того, как реагирует работа.
React создает виртуальную DOM (представление DOM в памяти) на основе методов визуализации из вашего кода. И когда изменяется состояние пользовательского интерфейса, рендер вызывается снова, и создается новый виртуальный DOM, который сравнивается с предыдущей версией виртуальной DOM, и только изменения затем изменяются в фактической DOM. Рассчитываются и реализуются наименьшее количество шагов, необходимых для преобразования старого DOM в новый. Изменение реальной DOM дорого.

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

Так что, когда вы используете JQuery изменить DOM в дополнение реагировать, React бы запутаться, потому что реальный DOM отличается от того, что он ожидает, что это будет. Попробуйте только модифицировать DOM через реакцию (например, метод визуализации), и эта ошибка не появится.

Так что если вам действительно нужно коснуться отдельных элементов напрямую, вы можете использовать ссылки. https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

Кроме того, поскольку вы переупорядочиваете списки, вы должны иметь в виду некоторые вещи о том, как реагирует работа. Реакт принимает очень наивный подход, когда дело доходит до списков. Он просматривает оба списка одновременно и генерирует мутацию всякий раз, когда есть разница. Таким образом, вставка элемента вверху приведет к реагированию на n число мутаций. где n - количество элементов в списке.

Это решение путем добавления дополнительного атрибута, называемого ключами к элементам. Ключи элементов в списке должны быть уникальными. React будет знать, чтобы сравнить элемент только с теми же ключами и не мутировать. Он изменит порядок. https://facebook.github.io/react/docs/reconciliation.html#problematic-case

И вместо того, чтобы удалять элемент из DOM и повторного вставки, вы также можете настроить его видимость на скрытый с помощью CSS. display:none через отрегулируйте себя и измените его после переупорядочения.
Или используйте анимацию css изнутри, вызванную сменой состояния.
Или воспользуйтесь поиском некоторой библиотеки анимационной анимации.
В принципе найти способ изменения DOM только с помощью реакции :)