Проблема с DOM
Манипулирование DOM — это сердце современной интерактивной сети. К сожалению, это намного медленнее, чем большинство используемых операций JavaScript.
Эта медлительность усугубляется тем фактом, что большинство фреймворков JavaScript обновляют DOM гораздо в большем объеме, чем нужно.
В качестве примера предположим, что у вас есть список из десяти элементов. Вы отмечаете первый пункт. Большинство фреймворков JavaScript перестраивают весь список. А Это в десять раз больше работы, чем необходимо! Только один объект изменился, а остальные девять были восстановлены в точности как были раньше.
Восстановление списка не представляет особой проблемы для веб-браузера, но современные веб-сайты могут использовать огромное количество манипуляций с DOM. Неэффективное обновление стало серьезной проблемой.
Чтобы решить эту проблемув React популяризировали нечто, называемое виртуальным DOM.
Виртуальный DOM
В React для каждого объекта DOM существует соответствующий «виртуальный объект DOM». Виртуальный объект DOM это представление объекта DOM, похожее на облегченную копию.
Виртуальный DOM-объект обладает теми же свойствами, что и реальный DOM-объект, но ему не хватает реальной возможности напрямую изменять то, что находится на экране.
Управление DOM происходит медленно. Управление виртуальной DOM происходит намного быстрее, потому что на экране ничего не рисуется. Думайте о манипулировании виртуальным DOM как о редактировании плана помещения, а не о перемещении комнат в реальном доме.
Как это помогает
Когда вы визуализируете элемент JSX, каждый виртуальный объект DOM обновляется.
Это может показаться неэффективно, но на самом деле идет незначительная затрата ресурос, из-за того, что виртуальный DOM может обновляться очень и очень быстро.
Затем, вертуальный React сравнивает виртуальный DOM с виртуальным снимком DOM до обновления, и определит в процессе «диффузией» какие объекты DOM изменилис.
Как только React узнает, какие виртуальные объекты DOM изменились, он обновит только эти объекты в реальном DOM. В нашем предыдущем примере React был бы достаточно умен, чтобы перестроить ваш один отмеченный элемент списка и оставить остальную часть списка нетронутой.
Это имеет большое значение! React может обновлять только необходимые части DOM. Репутация React является положительной для производительности во многом благодаря этой инновации.
Итак, вот что происходит, когда вы пытаетесь обновить DOM в React:
- Весь виртуальный DOM обновляется.
- Виртуальный DOM сравнивается с тем, как он выглядел до того, как вы обновили его. React выясняет, какие объекты изменились.
- Измененные объекты и только измененные объекты обновляются в реальном DOM.
- Изменения в реальном DOM приводят к изменению экрана.
Если вы хотите узнать больше о виртуальной DOM, вы уже нашли нужный ресурс!
