Содержание

Слайд 2

Компоненты React

ReactElement плохо подходит для создания комплексной разметки HTML. Объекты ReactElement сложно

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

Слайд 3

Компоненты React

Компоненты можно определить различными способами. Первый способ - функциональный. Например:

Здесь определяется

Компоненты React Компоненты можно определить различными способами. Первый способ - функциональный. Например:
компонент Hello. Название компонентов должно начинаться с заглавной буквы.

Слайд 4

Компоненты React

Второй способ определения компонентов предполагает использование классов ES6:

Для рендеринга компонента в

Компоненты React Второй способ определения компонентов предполагает использование классов ES6: Для рендеринга
классе компонента обязательно должен быть определен метод render(), который возвращает создаваемый элемент на JSX.

Слайд 5

Компоненты React

Также для определения мы можем использовать стрелочные функции (arrow functions):

Компоненты React Также для определения мы можем использовать стрелочные функции (arrow functions):

Слайд 6

Применение компонентов

Используем выше определенный компонент Hello

Применение компонентов Используем выше определенный компонент Hello

Слайд 7

Props

Props представляет коллекцию значений, которые ассоциированы с компонентом.
Эти значения позволяют создавать

Props Props представляет коллекцию значений, которые ассоциированы с компонентом. Эти значения позволяют
динамические компоненты, которые не зависят от жестко закодированных статических данных.
Функциональный подход:

Параметр props, который передается в функцию компонента, инкапсулирует свойства объекта. В частности, свойство name и age.
При рендеринге мы можем создать набор компонентов Hello, но передать в них разные данные для name и age. И таким образом, получим набор однотипной разметки html, наполненной разными данными.

Слайд 8

Props

Использование классов ES6:

Класс компонента также извне получает объект свойств, который доступен через

Props Использование классов ES6: Класс компонента также извне получает объект свойств, который доступен через this.props.
this.props.

Слайд 9

Props

Использование классов ES6:

Класс компонента также извне получает объект свойств, который доступен через

Props Использование классов ES6: Класс компонента также извне получает объект свойств, который доступен через this.props.
this.props.

Слайд 10

Props

Использование стрелочных функций (arrow functions):

Props Использование стрелочных функций (arrow functions):

Слайд 11

Props

Используем компонент Hello:

При рендеринге React передает значения атрибутов в виде единого объекта

Props Используем компонент Hello: При рендеринге React передает значения атрибутов в виде
"props". То есть значение из атрибута name="Tom" перейдет в свойство props.name.
В итоге будет создана следующая страница:

Слайд 12

Значения по умолчанию

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

Значения по умолчанию Мы можем определить для свойств значения по умолчанию на
случай, если их значения не передаются извне.
Если мы применяем классы, то для установки значений применяется статическое свойство defaultProps:

Слайд 13

Значения по умолчанию

При функциональном определении компонента также применяется свойство defaultProps:

Значения по умолчанию При функциональном определении компонента также применяется свойство defaultProps:

Слайд 14

Значения по умолчанию

И в любом из этих случаев, если мы не определим

Значения по умолчанию И в любом из этих случаев, если мы не
какие-то свойства для компонента, то они будут брать значения из значений по умолчанию:

Слайд 15

Обновление props

Сам this.props представляет неизменяемый объект, который предназначен только для чтения. Поэтому

Обновление props Сам this.props представляет неизменяемый объект, который предназначен только для чтения.
не следует его изменять, например:

Если же надо время то времени изменять какие-то внутренние данные компонента, то для хранения таких данных в React предназначен объект state, который будет рассмотрен далее

Слайд 16

События

Обработка событий элементов в React во многом похожа на обработку событий элементов

События Обработка событий элементов в React во многом похожа на обработку событий
DOM с помощью обычного JavaScript. В то же время есть небольшие отличия:
События в React используют camelCase (в стандартном html "onclick", в React - "onClick")
В JSX в обработчик события передается функция компонента, а не строка.
В React можно применять разные способы определения и вызова событий. Возьмем простейшую задачу - обработка нажатия кнопки.

Слайд 17

События

Возьмем простейшую задачу - обработка нажатия кнопки.
Распространенный подход заключается в установке привязки

События Возьмем простейшую задачу - обработка нажатия кнопки. Распространенный подход заключается в
события в конструкторе компонента:

Здесь используется событие нажатия кнопки, которое задается через атрибут onClick (не onclick).

Слайд 18

Этому атрибуту в качестве обработчика события передавалась функция this.press, которая определена в

Этому атрибуту в качестве обработчика события передавалась функция this.press, которая определена в
классе компонента. И при нажатии на кнопку будет вызываться функция press, которая с помощью функции alert отображает окно с некоторым уведомлением.
Главная сложность при использовании событий - это работа с ключевым словом this, которое указывает на текущий объект, в данном случае компонент.
По умолчанию в функцию обработчика не передается текущий объект, поэтому this будет иметь значение undefined. И ни к каким свойствам и методам компонента через this мы обратиться не сможем. И чтобы в метод press корректно передавалась ссылка на текущий объект через this, в конструкторе класса прописывается вызов:

События

Слайд 19

Используем компонент на веб-странице:

События

Используем компонент на веб-странице: События

Слайд 20

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

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

События

Слайд 21

Либо мы можем определить функцию обработчика события как обычный метод класса, а

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

События

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

Слайд 22

React использует концепцию SyntheticEvent - специальных объектов, которые представляют собой обертки для

React использует концепцию SyntheticEvent - специальных объектов, которые представляют собой обертки для
объектов событий, передаваемых в функцию события. И используя такой объект, мы можем получить в обработчике события всю информацию о событии:

Получение информации о событии

Параметр e - это и есть информация о событии, которая передается в обработчик системой и которую мы можем использовать при обработке.

Слайд 23

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае
можно вызвать обработчик через стрелочную функцию:

Передача параметров в обработчик события


Слайд 24

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае

Если необходимо передать в обработчик события некоторые аргументы, то в этом случае
можно вызвать обработчик через стрелочную функцию:

Передача параметров в обработчик события


Слайд 25

Объект state описывает внутреннее состояние компонента, он похож на props за тем

Объект state описывает внутреннее состояние компонента, он похож на props за тем
исключением, что состояние определяется внутри компонента и доступно только из компонента.
Если props представляет входные данные, которые передаются в компонент извне, то состояние хранит такие объекты, которые создаются в компоненте и полностью зависят от компонента.
Также в отличие от props значения в state можно изменять.
И еще важный момент - значения из state должны использоваться при рендеринге. Если какой-то объект не используется в рендерниге компонента, то нет смысла сохранять его в state.
Нередко state описывает какие-то визуальные свойства элемента, которые могут изменяться при взаимодействие с пользователем.
Например, кнопку нажали, и соответственно можно изменить ее состояние - придать ей какой-то другой цвет, тень и так далее. Кнопку нажали повторно - можно вернуть исходное состояние.

State

Слайд 26

Единственное место, где можно установить объект state - это конструктор класса:

State


При определении конструктора компонента в нем должен вызываться конструктор базового класса, в который передается объект props.

Слайд 27

Для обновления состояния вызывается функция setState():

Обновление состояния

Изменение состояния вызовет повторный рендеринг компонента,

Для обновления состояния вызывается функция setState(): Обновление состояния Изменение состояния вызовет повторный
в соответствии с чем веб-страница будет обновлена.
В то же время не стоит изменять свойства состояния напрямую, например:

В данном случае изменения повторного рендеринга компонента происходить не будет.
При этом нам не обязательно обновлять все его значения. В процессе работы программы мы можем обновить только некоторые свойства. Тогда необновленные свойства будут сохранять старые значения.

Слайд 28

Обновление состояния


Здесь определен компонент ClickButton, который по сути представляет кнопку. В состоянии кнопки хранится два свойства - надпись и класс. При нажатии на кнопку мы будем переключать с одного класса на другой. Событие нажатия кнопки через атрибут onClick связано с методом press(), в котором переключается класс кнопки.
При этом свойство state.label остается неизменным.

Слайд 29

Асинхронное обновление

При наличии нескольких вызовов setState() React может объединять их в один

Асинхронное обновление При наличии нескольких вызовов setState() React может объединять их в
общий пакет обновлений для увеличения производительности.
Так как объекты this.props и this.state могут обновляться асинхронно, не стоит полагаться на значения этих объектов для вычисления состояния. Например:

Для обновления надо использовать другую версию функции setState(), которая в качестве параметра принимает функцию. Данная функция имеет два параметра: предыдущее состояние объекта state и объект props на момент применения обновления:

Слайд 30

Асинхронное обновление


В props определено свойство increment - значение, на которое будет увеличиваться свойство counter в state (this.setState({counter: this.state.counter + parseInt(this.props.increment)});).
При чем при нажатии кнопки мы предполагаем, что функция setState() будет вызываться два раза, соответственно значение state.counter при нажатии кнопки должно увеличиваться на 2. Однако в реальности увеличение происходит лишь на 1:

Слайд 31

Асинхронное обновление


Теперь изменим код, применив второй вариант функции setState():

Чтобы избежать повторения, все действия по инкременту вынесены в отдельную функцию - incrementCounter, однако опять же функция setState() вызывается два раза. И теперь инкремент будет срабатывать два раза при однократном нажатии, собственно как и определено в коде и как и должно быть:

Слайд 32

Жизненный цикл компонента

В процессе работы компонент проходит через ряд этапов жизненного цикла.

Жизненный цикл компонента В процессе работы компонент проходит через ряд этапов жизненного
На каждом из этапов вызывается определенная функция, в которой мы можем определить какие-либо действия:
constructor(props): конструктор, в котором происходит начальная инициализация компонента
static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента. Этот метод не имеет доступа к текущему объекту компонента (то есть обратиться к объекту компоненту через this) и должен возвращать объект для обновления объекта state или значение null, если нечего обновлять.
render(): рендеринг компонента
componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
componentWillUnmount(): вызывается перед удалением компонента из DOM

Слайд 33

Жизненный цикл компонента

Кроме этих основных этапов или событий жизненного цикла, также имеется

Жизненный цикл компонента Кроме этих основных этапов или событий жизненного цикла, также
еще ряд функций, которые вызываются при обновлении состояния после начального рендеринга компонента, если в компоненте происходят обновления:
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state. В качестве параметра передаются новый объект props и state. Эта функция должна возвращать true (надо делать обновление) или false (игнорировать обновление). По умолчанию возвращается true. Но если функция будет возвращать false, то тем самым мы отключим обновление компонента, а последующие функции не будут срабатывать.
render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед компонента. Он позволяет компоненту получить информацию из DOM перед возможным обновлением. Возвращает в качестве значения какой-то отдельный аспект, который передается в качестве третьего параметра в метод componentDidUpdate() и может учитываться в componentDidUpdate при обновлении. Если нечего возвращать, то возвращается значение null
componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true). В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate

Слайд 34

Жизненный цикл компонента

Применим некоторые из событий жизненного цикла: