Введение в компоненты, состояние и свойства

Что такое React?

Проще говоря, React - это широко популярный интерфейсный фреймворк, полностью построенный на JavaScript и использующий комбинацию зависимостей. Когда вы начинаете использовать React, он может показаться отличным от обычного Javascript, поскольку React предоставляет особый способ организации и структурирования дизайна веб-приложения. Он использует J SX, расширение синтаксиса Javascript, где мы можем писать код, очень похожий на HTML, в котором фрагменты JSX разделяются на компоненты. Эти компоненты позволяют нам логически разделять код и функциональные возможности и легко читать, что в сочетании может сформировать полностью работающее веб-приложение. Давайте углубимся в компоненты и то, как они работают в React.

Компоненты в действии:

Как выглядит компонент в React? По сути, они могут быть записаны как функция или класс Javascript. Это сердце React и часть пользовательского интерфейса. Каждое приложение-приложение имеет по крайней мере один компонент, который мы называем корневым компонентом, который имеет и содержит другие дочерние компоненты, что по сути делает приложение «деревом» компонентов. Представим, что мы хотим создать приложение, подобное Twitter. Мы можем разделить эту страницу на компоненты, такие как Navbar, Profile, Trends и Feed. Теперь давайте посмотрим на эти компоненты в виде дерева:

У нас есть приложение в качестве корня с четырьмя дочерними компонентами. Теперь, если вы думаете о ленте, в ленте будет много твитов, и, в свою очередь, этот твит будет иметь лайки, комментарии и т. Д. Загрузите расширение Google React DevTool, зайдите в Twitter и исследуйте, сколько компонентов на самом деле есть в Twitter. .

Компонент обычно реализуется как класс или функция Javascript, которые имеют некоторое состояние и метод рендеринга, например:

Кроме того, мы должны вызвать «super ()» в конструкторе, поскольку мы наследуем от другого класса через ключевое слово extends.

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

Компонент, который я показал, является компонентом класса, который я называю Компоненты контейнера. Они озабочены тем, как все работает с точки зрения функциональности, и предоставляют данные и поведение презентационным или другим компонентам контейнера.

Компоненты представления связаны с внешним видом, редко имеют какое-либо состояние и получают данные и обратные вызовы исключительно через свойства. Они написаны как функциональные компоненты. Вот так:

Функциональный компонент возвращает JSX вместо использования метода render. Он не расширяет React.Component, поэтому не унаследовал то, что необходимо для хранения состояния. Функциональные компоненты по-прежнему могут получать реквизиты, но обратите внимание, что они должны быть явно записаны в качестве аргумента для функции. Подробнее о реквизите позже. Во-первых, давайте посмотрим, как данные хранятся в состоянии.

Что такое состояние?

React "Состояние" может быть одним из самых сложных понятий для изучения. Не только то, какие данные мы хотим хранить, но и для чего они нужны. Состояние компонентов - это объект Javascript, содержащий информацию, которая может изменяться со временем. Но он изменяется только при явном вызове с помощью this.setState из компонента. Каждый раз, когда он вызывается в компоненте, React будет повторно отрисовывать, и текущее состояние теперь будет тем же, что и возвращенное значение this.setState . Помните, что состояние предназначено для значений, которые, как ожидается, изменятся в течение срока службы компонентов.

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

Чтобы понять, почему мы устанавливаем начальное состояние в конструкторе, наиболее важно знать, что метод конструктора запускается первым при создании компонента. и рендер запускается позже.

Конечно, когда вы отправляете свой твит, ему не будет назначено никаких лайков, поэтому его начальное состояние будет 0. Но поскольку мы знаем, что есть кнопка, которую вы можете нажать, чтобы лайкнуть твит, состояние изменится и увеличивать ценность лайков. В нашем методе приращения используется метод setState, который мы используем для изменения состояния. Когда компонент отображается, JSX внутри определяет, как именно будет отображаться этот твит. В моем примере это просто кнопка. При нажатии этой кнопки вызывается функция «incrementLikeCount», тем самым обновляя состояние TweetComponent с помощью this.setState. Наше новое состояние лайков теперь 1. Если бы по нему снова щелкнули, компонент бы повторно отрендерил, убедитесь, что состояние лайков равно 1, и теперь установите его на 2 и так далее.

Реквизит:

Что такое реквизит? Свойства позволяют передавать значения в наши компоненты. Эти значения могут быть любыми: строками, объектами (включая массивы и функции) и т. Д. Они позволяют сделать наши компоненты более динамичными и гораздо более многоразовыми. Например:

Помните наш функциональный TweetComponent ранее? Все, что у него было, - это кнопка. Теперь мы должны знать, что наш TweetComponent должен заботиться о том, как выглядит твит с банановым хлебом. Ранее я показал вам, как увеличить количество лайков в Twitter в компоненте класса с помощью состояния. Но что, если мы хотим, чтобы TweetComponent отвечал только за увеличение количества лайков? Мы можем использовать свойство для передачи функции ‘incrementLikeCount’. Для этого мы должны сделать наш TwitterComponent родительским для TweetComponent:

Теперь наш TwitterComponent содержит состояние лайков и функциональность для установки нового состояния. Чтобы наш TweetComponent изменил состояние лайков, мы должны передать функцию, которая увеличивает количество лайков. Мы должны импортировать компонент из файловой директории, чтобы иметь возможность отрендерить его. Теперь все, что нам нужно сделать, это назвать опору и назначить ее функции класса в фигурных скобках JSX.

<TweetComponent incrementLikeCount={this.incrementLikeCount}/>

ПРИМЕЧАНИЕ. Я не вызываю функцию, когда передаю ее, поскольку я хочу изменить состояние только при нажатии кнопки.

Теперь, когда мы его передали. Как нам включить его в наш компонент TweetComponent?

Мы можем получить доступ к проповеди, которую мы передали, просто заявив:

onClick={props.incrementLikeCount()}>

Наш TweetComponent больше не несет ответственности за состояние и любые функции для изменения состояния. Встраивая реквизиты в ваши компоненты, мы можем отправлять данные как вниз, так и вверх по нашему «дереву». TwitterComponent может отображать несколько различных компонентов, каждый из которых несет свою ответственность перед веб-приложением.

Заключение:

Мы знаем, как управлять потоком функций и данных через свойства, как изменять состояние любого заданного компонента и как компоненты работают. Сложная часть React, особенно когда вы впервые начинаете его использовать, - это выяснить, какие обязанности требуется для того или иного компонента. При этом все это приходит с практикой и пониманием, и вскоре вы обнаружите, насколько мощным может быть React для ваших интерфейсных возможностей.

гиф недели: