Компоненты ReactJS: Основы

картинка база reactjs

ReactJS — это огромная библиотека пользовательского интерфейса (не фрэймворк), завоевавшая  большую любовь. Как-то разговаривая с  коллегой/другом  о ReactJS  я услышал от него, что работа с ReactJS не такая  интересная, поскольку там слишком много вариантов решения для одной задачи. После некоторого изучения и случайных собеседований я понял, что это как раз таки одна из причин, по которой разработчики сталкиваются с проблемами при работе с этой библиотекой.

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

Заодно мы пробежимся по  некоторым полезным темам и терминам в React, которые иногда  пугают новичков. А вот темы:

  1. Компонент Родитель
  2. Валидация свойств компонентов
  3. Взаимодействие компонентов
  4. Компонент со значением по умолчанию
  5. ES6+ Компоненты (и различие от normal компонентов)
  6. Бесструктурные компоненты

Это статья содержит только базу, поэтому возможно информация эта для вас окажется простой и не новой. Если вы ищете более сложные темы, то вы можете пройтись по нашим   многочисленным статьям о  ReactJS.

 

# Стандартный компонент React

Под стандартным компонентом я имею в виду то, что вы возможно, видели в большинстве репозиториев кода и статей:

Имейте в виду, что стандартный еще не значит лучшая практика, он очень распространен поскольку это содержится в официальной документации React  .
В функцию React.createClass должен быть передан в качестве аргумента объект. Этот объект определяет компонент React. Свойство render является самым важным и обязательным свойством. Оно отвечает за парсинг HTML-кода в JavaScript, JSX.
Веб-приложения интересны только тогда, когда они динамичны. Любая библиотека пользовательского интерфейса всегда предоставляет способ передачи данных в React это происходит через объект props. Поэтому, когда вы видите следующий JSX:

Мы говорим React, что, когда компонент вызывается, свойство (props) name со значением «World» должно быть передано, как мы видели в приведенном выше примере с render:

Метод render принимает компонент  и DOM  узел для отображения в нем.  Это скелет компонента  React.

 

 

# States и  Props

Динамические приложения должны передавать данные между собой. В React передача данных происходит в основном между компонентами и внешними сервисами, которые  предоставляют исходные данные (например, по протоколу HTTPlocalstorage).

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

На этапе инициализации  React  мы определяем исходное состояние (state) и свойства (props). Как только состояние обновляется, свойства (props) могут быть легко обновлены:

 

# Компонент Родитель

Тут всё довольно понятно. Если компонент  рендерит другой компонент в своем методе render, то он  это собственник (родитель).  Родитель имеет над компонентом контроль.

Давайте взглянем на другой пример:

Свойство Counter передается в другой компонент, CounterDisplay. Вы можете увидеть, как мы передаем состояние дочернему компонента через свойства.

 

# Взаимодействие компонентов

А что если бы у нас была кнопка в дочернем компоненте, которая увеличивала бы  и уменьшала целое число (состояние), управляемое в родительском компоненте. Что тогда делать?

Взаимодействие компонентов  представлено в двух формах:  поток данных от родителя к дочернему компоненту и поток данных от ребенка к родителю. Мы уже видели, как осуществляется поток от родителя к ребенку  с использованием props.

Для успешного достижения передачи данных от ребенка к родителю  в react, мы используем обработчики, переданные дочернему компоненту  через родительский  в качестве props. Родитель знает, что такое действие может произойти у ребенка, поэтому он устанавливает обработчик. Это больше похоже на события:

 

component interacrion

У компонента CounterDisplay есть  событие click. Обработчик, в свою очередь, обновляет состояние с помощью метода this.setState() и счетчик отображает обновленные свойства.

 

 

Компонент со значением по умолчанию

Не только состояния имеют возможность пользоваться начальными значениями с методом getInitialState. При необходимости вы также можете установить значения по умолчанию для props, которые будут использоваться при  загрузке компонента.  Для этого вы можете воспользоваться методом getDefaultProps:

Это очень пригодится для настройки значений по умолчанию в приложении.

 

 

# Валидация свойств компонентов

Одна из хорошей вещей в react компонентах, которую разработчики  выделяют это юзабилити. Вы можете убрать любой компонент в приложении, чтобы сделать то, что намеревались сделать при условии соблюдения правила. Как же  я использую правила при создании своих компонентов повторного использования? Ответ на этот вопрос —валидация свойств компонентов

Валидация  помогает вам чувствовать себя уверенным в том, что данные, поступающие в ваш компонент структурированы так, как вы ожидаете.

Если все, что вам нужно, это проверить тип и  существует ли он или нет, можете не включать isRequired:

 

 

# Компонент Класс (ES6)

React.createClass  это не только  единственный возможный способ создать валидный компонент React. С ЕS6 (что очень здорово), мы можем использовать классы, чтобы создавать react компоненты. Это означает, что вместо объекта в качестве аргумента со свойствами, мы используем наследование класса от  React.Component  для определения поведения:

Имя компонента это имя класса и класс расширяется от React.Component  чтобы унаследовать его функциональные возможности.

 

Установка состояний  с классами

Если вы решили идти по пути классов, то будьте готовы к  изменениям.  Изменения незначительные, например в установке начальных состояний:

Начальное состояние сейчас находится в конструкторе класса вместо использования  getInitialState. Важно всегда передавать props обратно родительскому классу с помощью super (props).

 

 

PROPS ПО УМОЛЧАНИЮ  И ВАЛИДАЦИЯ С ИСПОЛЬЗОВАНИЕМ КЛАССОМ

Свойства по умолчанию и проверка свойства отличаются также как и параметр исходного состояния. Мы рассматриваем методы, отвечающие за выполнение этих действий, такие как статические члены класса компонента, который они:

Есть еще несколько незначительных различий, но вы должны обратить внимание на то, что выше. А об остальных  различиях вы можете почитать в статье Тодда.

 

 

# Бесструктурные компоненты

Когда компоненту не нужно иметь дело с состояниями, то не следует использовать класс для определения компонента. Вы можете использовать только функции, если все, что требуется в компоненте это props.

Это проще чем вы думаете!!!

 

# Заключение

Темы, которые мы рассмотрели сегодня, это то, что приведет вас к настоящей разработке приложения на React.

Управление состоянием в react может показаться сложным, и именно поэтому , существуют такие инструменты, как Redux. Со временем, мы выложим туториалы о том, как управлять состоянием приложения  используя Redux.

Источник: scotch.io