Frontend-IT

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

Компонент не должен изменять собственные свойства. Собственные свойства (props) следует расценивать как вводные параметры для определенного компонента и эти параметры изменять не следует. Технически их можно изменять, но крайне не рекомендуется, потому что свойства конкретного компонента определяются родительским компонентом. Родительский компонент передаёт определенные свойства своим дочерним компонентам. Компонент может изменять собственное состояние, если такое состояние у него имеется. Компонент...

У каждого компонента в React за исключением корневого компонента есть родитель (parent). У одного родительского компонента может быть несколько дочерних компонентов (соотношение один ко многим - один родительский компонент может иметь много дочерних компонентов, но один дочерний компонент может иметь только один родительский). Исходя, из вышенаписанного в React существует ещё один важный принцип: Свойства (props) компоненту передаются от родительского компонента...

Рассмотрим свойства (props) и состояние (props) компонентов. В предыдущих статьях я уже отмечал, что свойства передаются дочерним компонентам от родительских и они позволяют влиять на внешний вид того или иного компонента, а также на его поведение. Состояние может меняться внутри конкретного компонента и состояние меняется на протяжении жизненного цикла того или иного компонента. Давайте посмотрим, как это выглядит визуально. У нас есть компонент React. Снаружи к нему приходят свойства от его родительского компонента...

В React JSX должен иметь один корневой элемент. Вспомним, что JSX может возвращаться их функции c помощью ключевого слова return, если вы создаёте функциональный компонент или из метода render(), если вы создаёте классовый компонент. Так вот первый пример – это валидный JSX, то есть корректный JSX. Ниже отображен не валидный JSX. В первом примере компоненты h1, p и Footer находятся внутри родительского компонента div, который является корневым компонентом в этом конкретном JSX-коде. Внизу компоненты...

В React существуют пользовательские и встроенные компоненты. Другими словами, React поставляется с определённым набором уже готовых к использованию компонентов. В данном пример, там, где вы видите div, h1 или p вы как раз и используете встроенные в React компоненты. Это не HTML-теги. Это именно React-компоненты. Внутри React создана логика касательно того, как создавать соответствующие HTML-теги непосредственно в реальном DOM. Еще раз подчеркну, что код как из примера выше будет сконвертирован в JavaScript-код...

JSX (JavaScript Syntax Extension) – это специальный синтаксис, с помощью которого можно объединять CSS, HTML и JavaScript, тем самым формировать полноценные компоненты React. Рассмотрим такой пример Можно обратить внимание, что структура данного примера очень похоже на HTML. Например, есть открывающий тег под названием Card, у этого тега есть два атрибута style и className. У этого открывающего тега есть соответствующий закрывающий тег </Card>. У родительского элемента <Card> есть дочерний элемент <Card...

Иерархия компонентов В любом приложении React должен быть один корневой компонент, который включает другие компоненты. Кроме этого, можно объединить в отдельный компонент другие компоненты, которые выполняют схожий функционал, например, список постов. На изображении выше получается, что корневой компонент включает в себя три компонента, а компонент, объединяющий схожие компоненты, включает в себя другие три компонента. Получается чёткая иерархия компонентов в этом конкретном примере. Компоненты можно и нужно переиспользовать...

Любое приложение React состоит из компонентов. На рисунке выше пример веб-страницы, которая скомпонована из разных компонентов. Характеристики компонентов 1. Компоненты можно использовать многократно Один и тот же компонент можно помещать в разных местах веб-страницы, а также на разных страницах веб-приложения. 2. Компоненты формируют чёткую иерархическую структуру Есть родительские компоненты, которые включают в себя дочерние компоненты. Дочерние компоненты, так же в свою очередь могут являться родительскими компонентами относительно других дочерних компонентов...

Начнём с того, что такое DOM (Document Object Model) и как React взаимодействует с DOM. Изменение состояния В любом Web-приложении HTML-документ представляется в виде дерева. На изображении выше представлен пример HTML-страницы и того, как она может быть представлена в браузере. Когда DOM уже сформирован и загружен в веб-браузер, то обновление всего DOM – это затратная операция. Особенно, если необходимо обновить весь DOM, перерисовать все элементы HTML-страницы. При использовании React для создания...

Давайте поговорим о преимуществах и недостатках одностраничных веб приложений. Преимущества 1. Веб страница не перезагружается при навигации по приложению. Это происходит из-за того, что дополнительные HTML страницы с сервера не загружаются, а вместо этого React с помощью JavaScript просто перерисовывает определенные части HTML страницы. 2. Моментальная перерисовка элементов веб страницы. React позволяет перерисовывать только определённые части веб страницы. При этом оставляя остальные части без изменений...

Как вы знаете клиенты взаимодействуют с серверами, для того чтобы с серверов скачивать HTML, CSS и JavaScript файлы. В одностраничных приложениях (SPA) клиент запрашивает только одну страницу HTML, а также JavaScript и CSS файлы для всего приложения. Другими словами, сервер передаёт клиенту только одну HTML-страницу, с сопутствующими JavaScript и CSS файлами. После этого, когда, например, клиент хочет перейти на другую страницу, то вся навигация между страницами выполняется непосредственно на стороне клиента...