React function component vs React class component презентация

Проще всего объявить React-компонент как функцию:
Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве параметра и возвращает React-элемент. Такие компоненты называются «функциональными», так как они буквально являются функциями.

Данный компонент выводит кнопку, нажатие на которую имитирует, с помощью функции setTimeout, выполнение сетевого запроса, а затем выводит окно сообщения с подтверждением выполнения операции. Например, если в props.user хранится 'Dan', то в окне сообщения, через три секунды, будет выведено 'Followed Dan'.

Для каждой из этих кнопок, выполним следующую последовательность действий:
Щёлкнем по кнопке.
Изменим выбранный профиль до того, как после нажатия на кнопку прошли 3 секунды.
Прочитаем текст, выведенный в окне сообщения.
В результате заметим следующие особенности:
При щелчке по кнопке, сформированной функциональным компонентом, при выбранном профиле Dan и при последующем переключении на профиль Sophie, в окне сообщения будет выведено 'Followed Dan'.
Если сделать то же самое с кнопкой, сформированной компонентом, основанном на классе, будет выведено 'Followed Sophie'.
В этом примере правильным является поведение функционального компонента.
«Если я подписался на чей-то профиль, а затем перешёл к другому профилю, мой компонент не должен сомневаться в том, на чей именно профиль я подписался. Очевидно, реализация рассматриваемого механизма, основанная на использовании классов, содержит ошибку .»

Навигация с помощью ссылок
Параметры маршрутов

Ссылки с параметрами

Парсинг строки запроса
Из нее можно получить два объекта. Объект searchParams - по сути объект URLSearchParams, который доступен в стандартном коде JavaScript и который позволяет получить из строки запроса параметры и управлять ими. И объект setSearchParams - функция изменения объекта searchParams.
Используя функции get через searchParams можно получить параметры name и age:

Условная переадресация
Программная навигация