Блог

Главная - Вопросы по программированию - Правильно ли я понимаю согласование реакции?

Правильно ли я понимаю согласование реакции?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Из того, что я собрал, просматривая различные учебные пособия весь день, кажется, что способ, которым react выполняет обновления dom, заключается в следующем процессе.

  1. Пользователь взаимодействует с реальным DOM каким-то образом, который запускает событие DOM, и обработчик события в конечном итоге запускает функцию, которая сообщает react обновить.
  2. React делает «снимок» виртуального dom (который на данный момент также представляет реальный dom), а затем переходит к созданию нового виртуального dom с обновленным состоянием и реквизитами.
  3. React разделяет снимок и новый виртуальный dom, а затем изменяет только те части dom, которые необходимо изменить, чтобы они соответствовали новому виртуальному dom.

Правильно ли я понимаю этот процесс, по крайней мере, на упрощенном уровне?

Комментарии:

1. На более высоком уровне ваше понимание правильное, но есть много вещей под капотом, где он использует алгоритм Diffing и сравнивает узлы дерева. Вы можете ознакомиться с официальными документами — reactjs.org/docs/reconciliation.html

Ответ №1:

Это почти правильно, я думаю, что ошибка здесь в том, что нет «нового виртуального DOM», React всегда сохраняет / использует / повторно использует две копии — представления VDOM реального DOM.

  • ( A ) VDOM, который помогает вносить изменения в реальный DOM (согласно этому VDOM, React внесет минимальные изменения в DOM).

  • ( B ) VDOM, который представляет все изменения, внесенные в реальный DOM (то, что вы назвали «моментальным снимком», будет сравниваться с A этим VDOM).

Итак, подведем итог процессу, как вы это сделали:

  1. Если VDOM не существует, создайте его (VDOM A ).
  2. Пользователь взаимодействует с реальным DOM каким-то образом, который запускает событие DOM, и обработчик события в конечном итоге запускает функцию, которая сообщает react обновить.
  3. React создает (или повторно использует) один из VDOMs ( B ) (который также является представителем реального dom на данный момент).
  4. React сравнивает VDOM B с VDOM A , а затем изменяет только те части VDOM ( A ), которые необходимо изменить.
  5. React обновляет реальный DOM с помощью VDOM A .

Обратите внимание, что для части 3. React использует алгоритм diff, который в некоторой степени просто сравнивает элементы keys и реквизиты (поверхностное сравнение).