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-коде. Внизу компоненты...