React
Спектакль

Основы - HTML DOM vs Virtual DOM

HTML DOM дорогой

Каждая веб-страница представляется внутренне как дерево объектов. Это представление называется Document Object Model . Более того, это интерфейс, нейтральный для языков, который позволяет языкам программирования (например, JavaScript) обращаться к элементам HTML.

Другими словами

HTML DOM является стандартом для получения, изменения, добавления или удаления элементов HTML.

Однако эти операции DOM чрезвычайно дороги .

Виртуальный DOM - это решение

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

Виртуальный DOM экономит время от ненужных модификаций DOM.

Как точно?

В каждый момент времени React имеет состояние приложения, представленное как Virtual DOM . Когда изменяется состояние приложения, это шаги, которые выполняет React для оптимизации производительности

1. Создайте новый виртуальный DOM, который представляет новое состояние нашего приложения

2. Сравните старый виртуальный DOM (который представляет текущий HTML DOM) и новый виртуальный DOM

3. На основе 2. найдите минимальное количество операций для преобразования старой виртуальной DOM (которая представляет текущий HTML DOM) в новую виртуальную DOM

• чтобы узнать больше об этом - прочитать алгоритм Diff Reiff

4. После обнаружения этих операций они отображаются в их эквивалентные операции HTML DOM

• помните, что Virtual DOM является лишь абстракцией HTML DOM и существует изоморфное соотношение между ними

5. Теперь минимальное количество операций, которые были найдены и перенесены в их эквивалентные операции HTML DOM , теперь применяются непосредственно к HTML DOM приложения , что экономит время от необходимости изменения HTML DOM .

Примечание. Операции, применяемые в виртуальной DOM, дешевы, потому что виртуальная DOM является объектом JavaScript.

Алгоритм сравнения React

Создание минимального количества операций для преобразования одного дерева в другое имеет сложность в порядке O (n ^ 3), где n - количество узлов в дереве. Реакция опирается на два предположения для решения этой задачи в линейном времени - O (n)

1. Два компонента одного и того же класса будут генерировать похожие деревья, а два компонента разных классов будут генерировать разные деревья.

2. Можно обеспечить уникальный ключ для элементов, которые стабильны в разных визуализаторах.

Чтобы решить, различаются ли два узла, React различает 3 случая

1. Два узла отличаются друг от друга, если они имеют разные типы.

• например, <div>...</div> отличается от <span>...</span>

2. Всякий раз, когда два узла имеют разные ключи

• например, <div key="1">...</div> отличается от <div key="2">...</div>

Более того, следующее следует иметь решающее значение и чрезвычайно важно понять , хотите ли вы оптимизировать производительность

Если они [два узла] не одного типа, React не собирается даже пытаться сопоставить то, что они отображают. Он просто удалит первый из DOM и вставляет второй.

Вот почему

Очень маловероятно, что элемент будет генерировать DOM, который будет выглядеть так, как будет генерироваться. Вместо того, чтобы тратить время на то, чтобы сопоставить эти две структуры, React просто восстанавливает дерево с нуля.

Советы и хитрости

Если два узла не одного типа, React не пытается их сопоставить - он просто удаляет первый узел из DOM и вставляет второй. Вот почему первый совет говорит

1. Если вы видите себя чередующимся между двумя классами компонентов с очень похожим выходом, вы можете сделать его одним и тем же классом.

2. Используйте shouldComponentUpdate, чтобы исключить компонент из rerender, если вы знаете, что он не изменится, например

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

Измерение производительности с помощью ReactJS

Вы не можете улучшить то, что вы не можете измерить . Чтобы улучшить производительность компонентов React, вы должны быть способны их измерить. ReactJS обеспечивает аддон инструментов для измерения производительности. Импортируйте модуль react-addons-perf для измерения производительности

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

Вы можете использовать ниже методы из импортированного модуля Perf :

• Perf.printInclusive ()
• Perf.printExclusive ()
• Perf.printWasted ()
• Perf.printOperations ()
• Perf.printDOM ()

Самый важный, который вам понадобится большую часть времени, - Perf.printWasted() который дает вам табличное представление о потерянном времени вашего отдельного компонента

Вы можете отметить столбец « Wasted time» в таблице и улучшить производительность компонента, используя раздел « Советы и рекомендации » выше

Обратитесь к официальному руководству React и отличной статье Benchling Engg. по реакционной эффективности