Я читал много статей по этому поводу. Насколько я понимаю, виртуальный DOM - это просто javascript объектное представление реального DOM. всякий раз, когда происходит какое-либо изменение состояния, новый объект Virtual DOm создается и сравнивается со старым с использованием алгоритма diff за время (n) и обновляет браузер только измененные части. Мой вопрос заключается в том, почему браузеры не сделали этого сами ??1001*
Также я попытался проверить различия между ванилью и реакцией с помощью простого нажатия клавиши внутри текстового поля с помощью chrome devtools. Ваниль js и реагировать имеют следующие следы в разделе Main, имеют следующие шаги:
- событие: нажатие клавиши // оба имеют
- событие: textInput // оба имеют
- recalcualte style // оба имеют
- Layout // имеет только vanilla js, версия React не имеет этого шага ??
- обновить дерево слоев // оба имеют
- Paint .// у обоих есть
Мой вопрос для вышеприведенного наблюдения состоит в том, почему в версии реакции нет шага макета, который занимает 0,48 мс в ванили. это то, что заставляет реагировать быстрее.
я также узнал об уничтожении макетов и пакетных обновлениях. поскольку мы не взаимодействуем с браузером, используя DOM-манипуляции напрямую в React, логику пакетного обновления c выполняет React. почему реакция эффективна? поэтому любому новому веб-разработчику не нужно беспокоиться об эффективных способах обновления браузера (скажем, как избежать перекомпоновки / изменения макета), вместо этого сосредоточьтесь на разработке реальных функций и реагируйте на все для нас?
было бы полезно, если вы можете приведите очень простой c демонстрационный пример, где виртуальный DOM имеет реальное преимущество, я буду использовать chrome devtools, чтобы провести расследование самостоятельно. спасибо:)