В этой статье я расскажу о некоторых важных и интересных возможностях React. Это очень важно знать разработчику React. Наши темы:
Виртуальный DOM, алгоритм сравнения, оптимизация производительности, компонент высшего порядка, настраиваемый хук. Начнем…
Виртуальный DOM:
DOM означает объектную модель документа. DOM простыми словами представляет собой пользовательский интерфейс нашего приложения. Каждый раз, когда происходит изменение состояния пользовательского интерфейса нашего приложения, DOM обновляется, чтобы отразить это изменение. DOM представлен в виде древовидной структуры данных. Из-за этого изменения и обновления DOM происходят быстро. Но после изменения обновленный элемент и его дочерние элементы необходимо повторно отобразить, чтобы обновить пользовательский интерфейс приложения.
Появляется концепция виртуального DOM, который работает значительно лучше, чем реальный DOM. Виртуальный DOM — это только виртуальное представление DOM. Каждый раз, когда состояние нашего приложения изменяется, виртуальный DOM обновляется вместо реального DOM.
Алгоритм сравнения:
Процесс проверки различий между новым деревом Virtual DOM и предыдущим деревом Virtual DOM называется «diffing». Различие выполняется с помощью эвристического алгоритма O (n). В ходе этого процесса React выведет минимальное количество шагов, необходимых для обновления реального DOM, исключая ненужные дорогостоящие изменения. Вместо этого React реализует эвристический алгоритм O(n), основанный на двух предположениях:
Два элемента разных типов будут давать разные деревья.
Разработчик может подсказать, какие дочерние элементы могут быть стабильными в разных рендерах с помощью ключевого свойства.
Оптимизация производительности:
Внутри React использует несколько умных методов, чтобы свести к минимуму количество дорогостоящих операций DOM, необходимых для обновления пользовательского интерфейса. Для многих приложений использование React приведет к быстрому пользовательскому интерфейсу без особой работы по оптимизации производительности. Тем не менее, есть несколько способов ускорить ваше приложение React. Они приведены ниже:
- Использование неизменяемых структур данных
- Избегайте примирения
- Используйте React.Fragments, чтобы избежать дополнительных оболочек HTML-элементов
- Избегайте использования индекса в качестве ключа для карты
- Виртуализируйте длинные списки
Компонент высшего порядка:
Компонент более высокого порядка — это продвинутая техника в React для повторного использования логики компонента. Компоненты более высокого порядка сами по себе не являются частью React API. Это паттерн, вытекающий из композиционной природы React.
Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.
Пользовательский хук:
Хуки — это новое дополнение в React. Они позволяют вам использовать состояние и другие функции React без написания класса. С помощью Custom Hooks мы извлекаем логику компонентов в повторно используемые функции. Пользовательский хук — это функция JavaScript, имя которой начинается с «use» и которая может вызывать другие хуки.
