Привет, Вы узнаете о том , что такое react, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое react, react lifecycle , настоятельно рекомендую прочитать все из категории Фреймворки. Famworks ( программная платформа).

Хотите узнать о том, что такое React, но вам все никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.

Менее привычный подход для back-end разработчиков, с ориентацией на верстку и событийный поток. React.js, по сути, является библиотекой/template-движком, на котором вполне можно разрабатывать без дополнительных средств, однако это не настолько удобно при росте проекта и его сложности.

Говоря «React», мы подразумеваем React + React DOM для веб-разработки. Если взять React и React Native, мы сможем в похожем синтаксисе разрабатывать кросс-платформенные мобильные приложения. Для упрощения такой подход называют React Native. Подробнее тут.

Таким образом, сформировалась целая экосистема React:

• Axios — для HTTP-запросов.
• React Router — для поддержки более удобного роутинга.
• Redux — для централизованного управления состояниями.
• React Router Redux — для связи роутера и контейнера состояний.
• Redux-Thunk / Redux-Saga / MobX — разные подходы для синхронизации асинхронных операций.

Самый популярный архитектурный паттерн в React.js — это Redux, эволюция идеи Flux. По сути, идея Flux — это тот самый знакомый CQRS для back-end-разработчиков.

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

Подход к разработке в React.js противоречит «классическому» — отделению кода от разметки. React имеет свой движок шаблонизации — JSX, который упрощает смешивание верстки и кода. Верстка вставляется прямо в код.

Из первых вопросов, которые стоит разобрать, я выделил такие:

• JSX;
• Components, lifecycle;
• State/props;
• Virtual DOM;
• Synthetic events;
• Unidirectional data flow;
• HOC/Pure components;
• Flux/Redux.

В качестве учебника вполне подойдет официальная справка. https://ru.reactjs.org/docs/getting-started.html

Разобравшись с этим материалом, вы освоите следующее:

• Компоненты React.
• Рендеринг ReactDOM.
• Классы компонентов и функциональных компоненты.
• JSX.
• Состояние (state).
• Обработка событий.
• Асинхронный метод setState.
• Свойства (props).
• Ссылки (refs).

Это — практически все, что нужно знать для того, чтобы создавать и поддерживать React-приложения

React Lifecycle

React невероятен, потому что позволяет создавать пользовательский интерфейс с помощью декларативного API. Вы указываете React, как должен выглядеть интерфейс, а все остальное он делает.

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

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

Mounting Монтирование: компонент добавляется в DOM.

• constructor()
• componentWillMount()
• render()
• componentDidMount()

Updates Обновления: компонент получает изменения свойств или состояния и вызывается при повторной визуализации компонента.

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

Unmounting Размонтирование: компонент удаляется из DOM.

• componentWillUnmount()

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

Предварительная подготовка

Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать ее. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла.

(внизу их код)

Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).

Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.

Что такое React?

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

Вот пример разбивки страницы на компоненты:

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

Что такое компонент React?

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

Для формирования страницы мы вызываем эти функции в определенном порядке, собираем вместе результаты вызовов и показываем их пользователю.

Напишем компонент внутри тега script файла index.html с type, установленным в "text/babel":

Когда мы вызываем функцию OurFirstComponent(), в ответ приходит фрагмент страницы.

Функции можно писать и так:

const OurFirstComponent = () => {
  return (
    // То, что нужно для создания компонента, идет сюда
  );
}

React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.

Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:

Когда мы вызываем функцию OurFirstComponent(), она возвращает фрагмент JSX-кода. Мы можем использовать так называемый ReactDOM для вывода того, что представляет этот код, на страницу:

Теперь тег H1 окажется внутри элемента с ID hook. Когда вы обновите страницу браузера, она должна выглядеть так:

Можно и написать собственный компонент на JSX. Делается это так:

ReactDOM.render(, placeWeWantToPutComponent);

Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.

Сборка компонентов

Компоненты React можно помещать в другие компоненты.

Вот что выведет вышеприведенный код:

Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.

Классы компонентов

До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.

Классы компонентов должны содержать функцию, называемую render(). Эта функция возвращает JSX-код компонента. Их можно использовать так же, как функциональные компоненты, например, обращаясь к ним с помощью конструкции:

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

JavaScript в JSX

В JSX-код можно помещать переменные JavaScript. Выглядит это так:

Теперь текст «I am a string» окажется внутри тега H1 Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:

Вот как будет выглядеть страница после обработки вышеприведенного фрагмента кода:

Подводные камни JSX

Переименуйте OurFirstComponent() в PlayButton. Нам надо, чтобы этот компонент возвращал следующее:

Однако, тут мы сталкиваемся с проблемой: class — это ключевое слово JavaScript, поэтому использовать его мы не можем. Как же назначить класс play элементу ?

Для того, чтобы этого добиться, нужно воспользоваться свойством className:

Особенности создаваемого компонента

Компоненты, основанные на классах, могут хранить информацию о текущей ситуации. Эта информация называется состоянием (state), она хранится в JS-объекте. В нижеприведенном коде показан объект, представляющий состояние нашего компонента. Об этом говорит сайт https://intellect.icu . Его ключ — это isMusicPlaying, с ним связано значение false. Этот объект назначен this.state в методе constructor, который вызывается при первом использовании класса.

Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?

Изменение компонента React на основе его состояния

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

Вот с чего мы начнем. Узнаем состояние компонента с помощью конструкции this.state. В следующем коде мы проверяем состояние и используем его для принятия решения о том, какой текст показать пользователю.

В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.

Все это не особенно полезно, если у нас нет способа изменять this.state.isMusicPlaying.

Как компонент реагирует на события?

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

Когда пользователь щелкает по тексту, представленному тегом H1 , компонент вызывает функцию handleClick. Функция получает объект события в качестве аргумента, а это значит, что она может, при необходимости, им пользоваться.

Мы используем метод .bind функции handleClick для того, чтобы ключевое слово this ссылалось на весь компонент, а не только на H1

Как должен работать компонент

Когда меняется состояние компонента, он снова вызовет функцию render. Мы можем изменить состояние с помощью this.setState(), если передадим этой функции объект, представляющий новое состояние. Компонент на странице всегда будет представлять свое текущее состояние. React самостоятельно обеспечивать такое поведение компонентов.

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

Обмен данными между компонентами

Компоненты могут «общаться» друг с другом. Посмотрим, как это работает. Мы можем сообщить PlayButton, проигрывается музыка или нет, используя так называемые свойства (props). Свойства — это информация, коллективно используемая родительским компонентом и компонентами-потомками.

Свойств в JSX выглядят так же, как HTML-свойства. Мы назначаем PlayButton свойство, называемое isMusicPlaying, которое является тем же самым, что и isMusicPlaying в this.state.

Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.

Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:

Если мы поменяем состояние на this.state = { isMusicPlaying: true }; и перезагрузим страницу, на ней должна появиться кнопка паузы:

События как свойства

Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.

Теперь, когда мы щелкаем по кнопке PlayButton, она меняет состояние Container, которое изменит props PlayButton, что приведет к обновлению кнопки на странице.

Неприятная особенность setState

При вызове setState изменение состояния не производится мгновенно. React ждет немного для того, чтобы увидеть, не нужно ли внести еще какие-то изменения, и только потом производит изменение состояния. Это означает, что нельзя точно знать, каким будет состояние компонента после вызова setState.

Поэтому вот так поступать не следует:

Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.

Выглядит это так:

Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.

Что такое ссылки?

Пришло время включить музыку. Для начала добавим тег audio

:

Нам нужен способ обратиться к тегу audio и вызвать либо его метод play(), либо pause(). Сделать это можно с помощью конструкции document.getElementById('audio').play(), но React предлагает кое-что получше.

Мы назначаем элементу атрибут, называемый ref, который принимает функцию. Эта функция, в качестве первого аргумента, принимает элемент, и присваивает его this.audio.


Эта функция будет вызываться каждый раз, когда выводится Container, то есть, this.audio всегда будет в актуальном состоянии и будет указывать на тег

.
Теперь мы можем запускать и приостанавливать воспроизведение музыки:

Выгрузим на страницу музыкальный файл (лучше — в формате .mp3) с использованием кнопки Choose files, нажмем на кнопку запуска воспроизведения и послушаем музыку.

React за пределами index.html

Как вы, возможно, догадались, React-код не должен «жить» исключительно внутри тега script. React поддерживает множество конфигураций сборки. К счастью, с помощью инструментов вроде Create React App всю рутинную работу по формированию каркаса приложения можно автоматизировать. Установите create-react-app, создайте новый проект, посмотрите руководство и приступайте к работе с JS-файлами в папке проекта src, применяя все те знания по React, которые вы сегодня получили.

Основы

Эти вопросы показывают общее представление о том, что такое React и как он работает:.

1. Что такое React?
   - React — это библиотека JavaScript для создания пользовательских интерфейсов.
   - По Facebook
   2. Каковы основные характеристики React?
   - Виртуальный ДОМ
   - JSX
   - Однонаправленный поток данных
   - Рендеринг на стороне сервера
   3. Что такое JSX?
   - JSX — это расширение синтаксиса Javascript, которое позволяет нам писать HTML в нашем JavaScript для создания React Elements
   - Babel компилирует JSX в вызовы React.createElement ()
   - Более чистый код с выражениями JSX
   - (B) Более безопасный код, поскольку использование JSX предотвращает атаки XSSSS
   4. Что такое виртуальный DOM?
   - Манипулирование фактическим DOM очень затратно
   - Виртуальный DOM: React создает виртуальное представление фактического DOM в памяти
   - Ожидаемые изменения сначала отражаются в обновленной версии Virtual DOM. Обновленный виртуальный DOM сравнивается с его предыдущей версией с использованием алгоритма React «diffing», чтобы определить, как лучше всего обновить реальный DOM.

Основы React

Что такое компонент в реакции и каковы два основных способа их определения?
- Компонент: независимый многоразовый интерфейс
- Компонент класса: компонент, реализованный с использованием классов ES6, расширяющих React.Component
- Компонент функции: Компонент, реализованный функцией JS, которая принимает аргумент props и возвращает элемент React.
2. Как компоненты Class сравниваются с компонентами Function?
- С помощью React Hooks компоненты класса заменяются функциональными компонентами для большинства случаев использования¹
- В прошлом логика с учетом состояния и жизненного цикла могла быть включена только в компоненты класса
Недостатки функциональных компонентов
- Для необычных жизненных циклов еще нет эквивалентов Hook: getSnapshotBeforeUpdate и componentDidCatch
- Старые сторонние библиотеки могут быть несовместимы с хуками
Недостатки компонентов класса
- Классы добавляют ненужную путаницу ради синтаксического сахара.
- Классы приводят к громоздкому иерархическому дереву, особенно во время повторного использования кода, что приводит к снижению производительности и сложности тестирования.
- Методы жизненного цикла класса разделяют связанные фрагменты кода
- Дополнительная информация: Чем функциональные компоненты отличаются от классов?
3. Что такое props и state в React?
- props — это объект JavaScript, переданный в Компонент, который содержит свойства конфигурации
- props неизменен принимающим компонентом
- state — это объект JavaScript, управляемый внутри компонента, который содержит его внутреннее состояние.
- Обновления для запуска повторного рендеринга
4. Что вызывает обновление компонента?
- Повторный рендеринг родителя, который может повлечь за собой новые props
- SetState ()
- (B) forceUpdate () (и этого следует избегать!)
5. Что делает setsettate () и как это работает?
- setState () планирует обновление объекта состояния компонента. -Когда состояние изменяется, компонент отвечает повторным рендерингом.
- Вызовы setState () являются асинхронными и могут быть пакетными.
- Обновления this.state не отражают новое значение сразу после вызова setState ()
- Из-за своей асинхронной природы вызов метода setState () путем передачи объекта, содержащего значение текущего состояния, может привести к неожиданному поведению
- Передача setState () функции, а не объекта, позволяет получить доступ к значению текущего состояния, избегая потенциально непредвиденного поведения, вызванного асинхронностью
6. Проведите меня через основные этапы жизненного цикла React
- 3 фазы: Mounting, Updating, Unmounting
- Mounting: конструктор → рендер → Updating DOM → componentDidMount
- Updating: рендер → обновление DOM → componentDidUpdate
- Unmounting: componentWillUnmount
- (B) включение getDerivedStateFromProps и shouldComponentUpdate
7. Как я могу предотвратить ненужный повторный рендеринг?
- React.PureComponent: Компоненты, созданные из этого класса, проводят поверхностное сравнение с предстоящими параметрами и состоянием и повторно визуализируют при наличии изменений.
- React.Memo: Компонент высшего порядка, который работает как -React.PureComponent, но используется для компонентов функций
shouldComponentUpdate: метод жизненного цикла, который принимает следующие реквизиты и состояние и возвращает логическое значение, указывающее, должен ли компонент повторно отображаться
8. Мое приложение React работает медленно, как мне улучшить его производительность?
- Выявление узких мест: профилирование компонентов в Chrome с помощью вкладки производительности Chrome или DevTools Profiler
- Виртуализируйте длинные списки — визуализируйте только узлы списков по мере необходимости
- Как избежать ненужных повторных рендеров (см. Предыдущий вопрос)
- Использование производственной сборки
9. Что такое рефери и для чего они используются?
- Ссылки предоставляют доступ к узлам DOM или элементам React, созданным в методе render ().
- В прошлом ссылки были ограничены только компонентами класса, но теперь они доступны в компонентах функций через хук useRef.
Использование включает в себя:
- Управление фокусом, выделением текста или воспроизведением мультимедиа.
- Запуск императивных анимаций.
- Интеграция со сторонними библиотеками DOM.
10. Что такое ключи и зачем они нужны при рендеринге списков?
- Ключи являются константными значениями строк, которые однозначно идентифицируют элемент списка среди своих братьев и сестер.
- Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены.
- Ключи необходимы, потому что согласование различий элементов списка без них крайне неэффективно
11. Что такое контролируемые и неуправляемые компоненты в React?
- Оба являются способами реализации элементов управления формы в React
- Контролируемый: данные формы обрабатываются компонентом React
- Неконтролируемый: данные формы обрабатываются самим DOM
- Контролируемые компоненты являются рекомендуемым способом реализации форм.
- Неконтролируемые компоненты являются опцией при преобразовании устаревших баз кода в React или интеграции с не-React библиотекой¹

12. Что такое props.children?

• Содержимое между открывающим и закрывающим тегами компонента передается как дочерний атрибут props: props.children
  - props.children может быть строковыми литералами, синтаксисом HTML, выражениями JS и функциями JS
  13. Что такое границы ошибок?
  - Границы ошибок — это компоненты React, которые перехватывают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс.
  - Компоненты становятся границами ошибок, если они определяют: getDerivedStateFromError () или componentDidCatch ()
  - Границы ошибок обычно определяются один раз и используются во всем приложении путем обтекания других компонентов, таких как блоки catch
  14. Поговорите со мной об обработке событий в React. Где SyntheticEvent вписывается в картину?
  - Обработка событий в элементах React аналогична обработке обычных элементов DOM, за исключением того, что в React есть несколько синтаксических различий¹
  - Разница в синтаксисе 1: события React называются с использованием camelCase, а не в нижнем регистре.
  - Синтаксическая разница 2: С помощью JSX вы передаете функцию в качестве обработчика события, а не строку.
  - Элементы React получают синтетические события при обработке
  - SyntheticEvent: кросс-браузерный объект-оболочка React вокруг собственного события браузера
  - SyntheticEvent позволяет событиям одинаково функционировать в разных браузерах
  15. Зачем вам связывать функцию в компоненте класса?
  - Проблема связана с Javascript, а не с React
  - В JavaScript это контекст функции, который принимает динамические значения в зависимости от того, как вызывается функция
  - Когда функция используется как обработчик события как часть класса, она не связана и, как результат, не определена, что вызывает исключение при обращении к this.state или this.props
  - Решение 1: это может быть явно связано с помощью метода bind ()
  - Решение 2. Поскольку функции со стрелками принимают значение this в своей лексической области видимости, это может быть связано с использованием функций со стрелками
  16. Каковы общие подходы к повторному использованию кода в React?
  - Компонент высшего порядка
  - Компонент высшего порядка: функция, которая берет компонент React и преобразует его в другой компонент, обогащая его функциональностью многократного использования
  - Распространенный в сторонних библиотеках распространенный пример — подключение React Redux
  - Легко составьте компонент, связав несколько HoC
  - Недостаток: плохая читаемость при соединении многих каналов HoC, приводящая к адскому обертке
  - Недостаток: ад-обертка может привести к вложенному дереву и затруднению отладки
  Render props
  - Реквизит рендеринга: шаблон, в котором компонент использует реквизит (функцию), который диктует свою логику рендеринга, а не реализует собственную.
  - Распространенным примером является React-Router
  - Недостаток: потенциально может быть многословным, поскольку логику рендеринга необходимо передать в JSX
  - Недостаток: неправильная реализация может привести к проблемам с памятью
  Пользовательские крючки
  - Пользовательский хук — это функция Javascript, имя которой начинается с «use» и вызывает другие хуки
  - Является частью обновления с подключением React 16.8 и позволяет повторно использовать логику с сохранением состояния без перестройки иерархии компонентов
  В большинстве случаев пользовательских хуков достаточно для замены реквизита рендера и HoC и уменьшения необходимого количества вложений.
  Позволяет вам избежать обертки ад / несколько уровней абстракции, которые могут прийти с Render Props и HoCs
  Недостаток: крючки нельзя использовать внутри классов
  Разное :
  - Все 3 способа решения сквозных проблем:
  - Общее продолжение заключается в реализации простого HoC, Render — Prop или пользовательского хука
  - Дальнейшие чтения 1: компоненты высшего порядка против рендеринга реквизита
  - Дальнейшее чтение 2: Сравнение: HOCs против Render Props против Hooks
  17. Почему асинхронные вызовы должны выполняться в componentDidMount, а не в конструкторе?
  - Распространенным заблуждением является то, что выборка данных в конструкторе позволяет избежать дополнительного шага рендеринга по сравнению с componentDidMount.
  - Реальность: выборка данных в конструкторе не обеспечивает повышения производительности по сравнению с componentDidMount¹
  - Данные не будут загружены, если асинхронный запрос в конструкторе завершится после монтирования компонента
  - Лучшие практики — избегать побочных эффектов в конструкторе.
  - В конструкторе состояние должно быть инициализировано, а setState () не должно вызываться
  - (B) выборкой данных через асинхронные вызовы можно управлять с помощью ловушки useEffect³
  - (B) React Suspense является потенциальной альтернативой извлечению данных в будущем

React Hooks

1. Что такое React Hooks?
   - Новая функция в React 16.8
   - Позволяет компонентам функций использовать состояние и другие предыдущие функции только для класса
   - Обратная совместимость и опционально
   2. Почему я должен использовать крючки?
   - Хуки позволяют просто повторно использовать логику с сохранением состояния без многоуровневых абстракций, таких как HoC и Render -Props (см. Вопрос о повторном использовании кода)
   - Полностью согласен и обратно совместим
   - Хуки облегчают понимание сложных компонентов, группируя связанный код в функции
   - Хуки позволяют избегать компонентов класса, которые создают ненужные сложности
   3. Что такое хук useState?
   - useState — это хук, который позволяет добавлять состояние React для компонентов функций
   - useState, как и все хуки, является функцией
   - Аргумент: исходное состояние
   - Возвращает: пара, содержащая текущее состояние и функцию для его обновления.
   4. Что такое хук useEffect?
   - useEffect позволяет выполнять побочные эффекты в компонентах функций
   - useEffect срабатывает после рендеринга
   - useEffect похоже на сочетание componentDidMount, componentDidUpdate и componentWillUnmount
   - Аргументы: вызываемая функция и массив для React, чтобы проверить изменения для визуализации
   5. Что такое крючок theuseReducer?
   - useReducer — это альтернатива useState, которая используется, когда существует сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего
   - 3 аргумента: функция редуктора, начальный объект состояния и функция для ленивой инициализации состояния
   - Функция Reducer принимает текущее состояние и переменную действия и возвращает следующее состояние
   - Возвраты: пара, содержащая текущее состояние, и функция отправки для отправки действия.
   - Работает аналогично Redux
   6. Что такое нестандартные крючки?
   (См. Вопрос о повторном использовании кода, в частности, раздел о пользовательских хуках)

7. Как производительность использования хуков сравнивается с производительностью классов?

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

State Management
1. Что такое Redux?
- Redux — это библиотека для управления состоянием приложения
- Redux — это решение для глобального управления состоянием, позволяющее передавать данные без необходимости проходить реквизит через каждый уровень (так называемое бурение

продолжение следует...

Продолжение:

Часть 1 Основы React, React Lifecycle , вопросы на собеседование
Часть 2 Итоги - Основы React, React Lifecycle , вопросы на собеседование

Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.