Компоненты – основные строительные блоки React. Если вы изучали Angular, то компоненты очень похожи на директивы (в других языках – виджеты или модули). Компонент может представлять собой код на JavaScript или на JSX (набор HTML, CSS, JS) + информация, работающая с этим объектом. Если вы будете использовать JSX, то потребуется компиляция проекта для преобразования JSX в JavaScript.
Пособие по React начинается с создания первого компонента.
Этот код выводит на экран уже привычное “Hello world”.
В нашем классе присутствует единственный метод render. Каждый из компонентов содержит этот метод, т. к. он определяет внешний вид созданного интерфейса.
ReactDOM.render принимает два аргумента: объект для отображения и ноду, в которую будет установлен объект.
В описанном коде определяется, каким образом React должен оперировать с объектом HelloWorld, и как его отобразить в блоке с id root. Через архитектуру React, которая наследует отношения между компонентами по принципу “предок – потомок”, нам необходимо будет использовать в наших приложениях только ReactDOM.render т. к. рендеринг родительского компонента отобразит все вложенные в него дочерние компоненты.
Может показаться странным смешивать логику JavaScript и разметку, но в этом и есть суть использования JSX – применение связки HTML и JavaScript кода в одном объекте программы.
В процессе работы React создает из этих объектов virtual DOM, которая отображает реальную DOM в виде объектов JavaScript. Таким образом, вы сможете получить доступ к шаблонам с функционалом JavaScript.
Следующий код демонстрирует результат трансформации нашего JSX:
Обычно интерфейс пользователя имеет много различных состояний, что мешает контролировать его. Повторный рендеринг virtual Object Model при изменении ее состояния облегчает отслеживание текущего статуса приложения.
Описанный выше процесс можно представить так:
- некоторые действия пользователя влияют на статус приложения;
- повторный рендеринг virtual Object Model;
- сравнивается предыдущая и новая версия virtual Object Model;
- реальная Object Model принимает данные, полученные в процессе сравнения.
Следующий базовый компонент, который включен в пособие по React, – это state. Каждый объект React может влиять на свое состояние и передавать эту информацию в качестве параметров дочерним объектам или при помощи props. Рассмотрим код:
В этом примере мы добавили новый метод constructor. Как говорилось ранее, это способ установки состояния компонента. Другими словами, любые данные, размещенные в this.state внутри конструктора, будут частью состояния этого компонента. В примере мы указываем нашему компоненту, что хотим отслеживать username. Это имя пользователя теперь можно применять внутри нашего компонента вызвав , что мы и делаем в методе render.
Последнее, что важно помнить про state, – компоненту необходимо иметь возможность модифицировать его собственное состояние. В коде это делается при помощи метода setState. Ранее мы уже рассматривали процесс изменения состояния:
- сообщаем приложению, что состояние изменилось;
- повторный рендеринг virtual DOM;
- предыдущая версия virtual Object Model сравнивается с новой virtual DOM;
- текущая Object Model получает информацию после сравнения.
В методе setState реализовано оповещение приложения об изменении статуса данных. Во время вызова этого метода виртуальная Object Model перестраивается, находятся отличия с текущей Object Model, и происходит обновление информации после сравнения.
В коде ниже, у нас есть поле ввода input, которое в процессе ввода автоматически обновляет состояние компонента и изменяет username.
Мы ввели несколько новых понятий. Метод handleChange вызывается каждый раз при введении текста в поле ввода. Когда handleChange срабатывает, вызывается setState, чтобы переназначить username независимо от входных данных (e.target.value). Помните, что при вызове setState создается обновленная виртуальная Object Model, сравнивает ее с существующей, а потом обновляет реальную Object Model.
Алгоритм работы кода из примера выше:
- пользователь вводит текст в соответствующее поле;
- срабатывает handleChange;
- изменяется state компонента;
- виртуальная Object Model перестраивается;
- сравниваются отличия;
- обновляется реальная Object Model.
Передача состояния наследнику через props открывает возможность коду на React оставаться понятным.
В четвертой строке есть атрибут name, который хранит значение Biblprog. Теперь наш компонент сможет использовать и получит в ответ Biblprog.
Рассмотрим более сложный пример: родительский компонент будет отслеживать состояние и передавать часть состояния наследнику через props.
В этом куске кода ничего нового не происходит, кроме появления нового класса ShowList:
Запомните, что код, возвращаемый методом render, является репрезентацией реальной DOM, а Array.prototype.map создает массив и заполняет его значениями, которые вернутся после вызова callback-функции.
В примере console.log возвращает [“<li> ‘Dwight Eisenhower’ </li>”, “<li> ‘Charles de Gaulle’ </li>”, “<li> ‘Winston Churchill’ </li>”]. Обратите внимание, что был создан новый массив, и к каждому элементу массива добавлено <li></li>.
Еще один важный нюанс в работе props: несмотря на расположение данных, существует определенное место для управления ими. Пособие по React пропагандирует такой подход, который упрощает манипулирование данными и позволяет сохранить простоту архитектуры.
В методе addFriend был вызван setState, в котором мы передаем функцию, а она, в свою очередь, переходит в state. Описание может казаться слегка запутанным, но дальше все прояснится.
Здесь мы имеем возможность добавлять имена в наш список друзей при помощи компонента AddFriend. Мы так делаем для того, чтобы придерживаться правил манипуляции нашими данными – объект AddFriend получит метод addFriend при помощи props только после вызова handleAddNew.
- prop-types – проверяет наличие и типы props в дочернем объекте.
- propTypes – следит за тем, чтобы конкретные props были определенного типа.
- defaultProps – позволяет определить значение по умолчанию для отдельных props.
В следующем примере требуется, чтобы addFriend был функцией, передаваемой компоненту AddFriend.
Пособие по React завершает тема жизненного цикла – важный момент в генерировании DOM.
Все компоненты, создаваемые вами, будут иметь собственные жизненные события. Например, если мы хотим сделать ajax-запрос на первоначальный рендеринг и получить ответ, в каком месте его нужно вызвать? Как использовать определенную логику, когда реквизиты компонента изменились? Ответами на все вопросы будут – различные жизненные события.