Введение
Как говорится на официальном сайте React:
«React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».
Мы разрабатываем эффективные классные одностраничные приложения с использованием React.
Любую веб-страницу можно разделить на компоненты. Пример:
Почему реагировать?
Состояние пользовательского интерфейса становится трудно обрабатывать с помощью Vanilla JS. Вам придется вручную выбирать элементы DOM, и есть вероятность, что вы в конечном итоге будете использовать слишком много селекторов запросов для своих манипуляций и операций.
Когда мы создаем веб-приложения, в которых мы динамически добавляем или удаляем компоненты, это может быть громоздкой операцией с Vanilla JS.
React спасает нас от этого кошмара, проблемы управления состоянием пользовательского интерфейса. Это позволяет разработчикам сосредоточиться на бизнес-логике, а не на предотвращении взрыва приложения.
React поддерживается большим сообществом, что является дополнительным преимуществом.
JSX
Это расширение синтаксиса для JS. Babel компилирует JSX в вызовы React.createElement().
Итак, приведенные выше два примера идентичны.
После компиляции выражения JSX становятся обычными вызовами функций JavaScript и оцениваются как объекты JavaScript.
ПРИМЕЧАНИЕ. JSX предотвращает атаки путем внедрения.
По умолчанию React DOM экранирует любые значения, встроенные в JSX, перед их рендерингом. Таким образом, это гарантирует, что вы никогда не сможете внедрить что-либо, что явно не написано в вашем приложении.
Вместо того, чтобы искусственно разделять технологии, помещая разметку и логику в отдельные файлы, React разделяет задачи слабо связанными единицами, называемыми «компонентами», которые содержат и то, и другое.
Рендеринг в React
Обычно SPA, встроенный в реакцию, будет иметь один корневой узел DOM. Как указано на официальном сайте,
«Элементы — это самые маленькие строительные блоки приложений React».
То, что мы видим на экране, является элементом. А для рендеринга элемента React на корневом узле DOM мы используем метод ReactDOM.render().
ReactDOM.render(‹App /›, document.getElementById(‘root’));
Элементы React неизменяемы. После создания его дочерние элементы или атрибуты не могут быть изменены.
React DOM сравнивает элемент и его дочерние элементы с предыдущим и применяет только те обновления DOM, которые необходимы для приведения DOM в желаемое состояние.
Реквизит и состояния
Реквизиты и состояния — это основные концепции React. Изменения в свойствах и/или состояниях вызывают React для повторного рендеринга компонента и потенциального обновления DOM в браузере.
Реквизит
«реквизит» позволяет нам передавать данные от родительского компонента к дочернему компоненту. Компонент никогда не должен изменять свои собственные реквизиты. Реквизиты доступны только для чтения.
Все компоненты React должны вести себя как чистые функции в отношении своих реквизитов.
Состояние
Состояние используется для изменения компонента или, скажем, состояния компонента изнутри. Изменения состояния также вызывают обновление пользовательского интерфейса.
В предлагаемой архитектуре проекта состояния поддерживаются в компонентах более высокого уровня (обычно компоненты на основе классов) и передаются в качестве реквизита компонентам более низкого уровня, которые обычно являются презентационными компонентами. Компоненты более низкого уровня не могут напрямую редактировать состояние.
Изменение состояния
Состояния в React не изменяются напрямую. Он изменяется с помощью метода под названием «setState()».
Состояния назначаются только в конструкторе. Обновления состояния могут стать асинхронными, поэтому форма вышеуказанного метода, которая принимает функцию, а не объект, является наиболее предпочтительной. Функция получает предыдущее состояние в качестве первого аргумента, а реквизиты во время применения обновления — в качестве второго аргумента.
ПРИМЕЧАНИЕ: метод setState() объединяет предоставленный объект с текущим состоянием. Однако слияние неглубокое.
Управление состояниями в функциональных компонентах
Исторически сложилось так, что состояния в реакции сохранялись в компонентах на основе классов. Однако, начиная с React 16.8, также есть способ управлять состояниями в функциональных компонентах с помощью хука useState() React.
useState() — это функция, которая принимает начальное состояние и возвращает массив ровно из двух элементов. Первый элемент, возвращаемый обратно, всегда будет иметь текущее состояние, а второй элемент всегда будет функцией, которая позволяет нам обновлять это состояние. Например:
Компоненты без состояния и компоненты с состоянием
Компонент с отслеживанием состояния — это компонент, который может быть либо компонентом на основе класса, либо функциональным компонентом, но управляет состоянием.
Вы можете использовать компоненты без состояния внутри компонентов с состоянием, и наоборот.
Классовые и функциональные компоненты
Основное различие между этими двумя компонентами после последнего обновления React заключается в том, что компоненты на основе классов расширяют компонент React, в то время как функциональные компоненты являются обычными функциями, которые принимают реквизиты в качестве аргументов. Они отличаются управлением состоянием и крючками жизненного цикла.
Крючки жизненного цикла компонентов
Это относится только к компонентам на основе классов. Важные зацепки жизненного цикла для компонента на основе классов в React перечислены ниже на диаграмме. Мы будем разделять эти крючки жизненного цикла на основе создания и обновления компонентов. React выполняет эти хуки для нас в разное время.
Жизненный цикл компонента — создание
«getDerivedStateFromProps» — это хук жизненного цикла, который был добавлен после React 16.3 и представляет собой статическую функцию JS для синхронизации состояний с изменениями свойств для компонента. Хотя он будет использоваться в очень редких сценариях.
Жизненный цикл компонента — обновление
‘getSnapshotBeforeUpdate’ принимает предыдущие реквизиты и предыдущее состояние и возвращает объект моментального снимка, который можно настроить. Он также используется минимально, обычно в сценариях, например, если мы хотим сохранить последнюю точку прокрутки пользователя в компоненте, чтобы после обновления пользовательского интерфейса мы могли восстановить представление до этой конкретной точки прокрутки.
Эквивалент крюка жизненного цикла для функциональных компонентов
С введением хуков React функциональные компоненты стали более мощными и теперь также могут управлять состояниями. Ранее мы исследовали хук React ‘useState’. Здесь мы собираемся исследовать хук React «useEffect», который в основном объединяет функциональные возможности или варианты использования, которые мы можем охватить, всех хуков жизненного цикла на основе классов в одном хуке React.
"useEffect" будет выполняться для каждого цикла рендеринга. Следовательно, это «componentDidMount» и «componentDidUpdate» в одном хуке. Тем не менее, это может быть сложнее в использовании. Что, если мы хотим поставить HTTP-запрос только при создании компонента в самый первый раз?
«useEffect» принимает второй аргумент в качестве аргумента для проверки, когда он должен выполнять свои операции. Итак, когда мы передаем пустой массив в качестве аргумента, он сообщает React, что у него нет зависимостей для проверки, следовательно, он будет запущен только во время создания.
Оптимизация: shouldComponentUpdate
Хук жизненного цикла shouldComponentUpdate принимает два аргумента nextProps и nextState. По сути, он сравнивает nextProps с текущими реквизитами, но это может быть сложнее.
Предположим, в реквизите есть массив «лица», и его нужно сравнить в этом хуке жизненного цикла. Массивы являются ссылочным типом в JS. Следовательно, мутация состояний в React становится важной. Мы всегда создаем новый объект, который, в свою очередь, ссылается на новый указатель и последовательно, сравнение становится успешным.
Поскольку этот хук жизненного цикла недоступен для функционального компонента, мы оптимизируем наши функциональные компоненты с помощью React.memo().
Если мы хотим выполнить полную проверку реквизита, лучше использовать чистый компонент в React, а не использовать этот хук жизненного цикла.
Обновления DOM в React
React не обновляет DOM сразу после вызова метода рендеринга. Он сравнивает старый виртуальный DOM с перерисованным DOM.
Он изменяется только в тех местах, где обнаружены различия. Например, если текст кнопки изменится, он будет обновлять только текст, а не повторно отображать кнопку, забудьте о DOM.
Компоненты высшего порядка
Все, что он делает, по сути, это обертка другого компонента. Он не содержит собственной логики или стилей и не добавляет какой-либо структуры в код JSX.
ссылки
Рефы предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.
Есть несколько хороших вариантов использования рефов:
· Управление фокусом, выделением текста или воспроизведением мультимедиа.
· Запуск императивной анимации.
· Интеграция со сторонними библиотеками DOM
ПРИМЕЧАНИЕ. Избегайте использования ссылок для всего, что можно сделать с помощью объявления.
Я также добавляю ссылки на мои связанные статьи о Redux и сравнении механизма обнаружения изменений в Angular и React.
Я также хотел бы упомянуть курс Udemy по React от Academind, который помог мне понять нюансы React.
Ссылки:
