1. Как работает React?

React создаёт виртуальный DOM. Когда состояние компонента изменяется, сначала запускается алгоритм "diffing", который определяет, что изменилось в виртуальном DOM. Второй этап - согласование (reconciliation), где React обновляет DOM с результатами diff.

2. Каковы преимущества использования React?

- Легко понять, как компонент отображается - достаточно посмотреть на render-функцию. - JSX делает код компонентов легко читаемым. Также просто увидеть структуру или то, как компоненты соединяются. - React можно рендерить на стороне сервера. Это улучшает SEO и производительность. - Легко тестировать. - Можно использовать React с любым фреймворком, так как это только слой представления.

3. В чём разница между презентационным компонентом и компонентом-контейнером?

Презентационные компоненты отвечают за внешний вид. Обычно они получают данные и колбэки исключительно через props. Эти компоненты редко имеют собственное состояние, а если и имеют, то обычно это состояние UI, а не данных. Когда компонент просто получает props и отображает их на странице - это "stateless component" (компонент без состояния), для которого можно использовать чистую функцию. Их также называют "dumb components" или презентационными компонентами. Компоненты-контейнеры больше отвечают за логику работы. Они предоставляют данные и поведение презентационным или другим контейнерным компонентам. Они определяют действия и предоставляют их в виде колбэков презентационным компонентам. Часто они содержат состояние, так как служат источниками данных.

4. Каковы различия между классовым компонентом и функциональным компонентом?

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

5. В чём разница между state и props?

State - это структура данных, которая начинается со значения по умолчанию при монтировании компонента. Она может изменяться со временем, обычно в результате пользовательских событий. Props (сокращение от properties) - это конфигурация компонента. Они получаются сверху и являются неизменяемыми с точки зрения компонента, который их получает. Компонент не может изменять свои props, но он отвечает за сборку props своих дочерних компонентов. Функции обратного вызова также могут передаваться через props.

6. Какие существуют методы жизненного цикла?

- \`componentWillMount\` (устарел) - чаще всего используется для конфигурации приложения в корневом компоненте. - \`componentDidMount\` - здесь выполняются все настройки, которые нельзя сделать без DOM, и начинается загрузка необходимых данных. Также здесь можно настраивать eventListeners и т.д. - \`componentWillReceiveProps\` (устарел) - реагирует на изменения конкретных props для изменения состояния. - \`shouldComponentUpdate\` - позволяет предотвратить повторный рендеринг, если компонент получает новые props. Должен возвращать boolean, который определяет, будет ли компонент перерендерен. - \`componentWillUpdate\` (устарел) - редко используется. Может использоваться вместо componentWillReceiveProps в компонентах с shouldComponentUpdate. - \`componentDidUpdate\` - часто используется для обновления DOM в ответ на изменения props или состояния. - \`componentWillUnmount\` - позволяет отменить исходящие сетевые запросы или удалить все event listeners, связанные с компонентом.

7. Объясните React Hooks.

Хуки позволяют использовать больше возможностей React без классов. Первый хук, с которым вы столкнётесь - useState. Он добавляет состояние в функциональные компоненты и возвращает массив с геттером и сеттером. Синтаксис: \`\`\`jsx const [count, setCount] = React.useState(0); ; \`\`\` Эквивалент в классовом компоненте: \`\`\`jsx this.state = { count: 0, }; ; \`\`\` Следующий хук - useEffect. Он позволяет выполнять побочные эффекты в функциональных компонентах. Передача пустого массива вторым аргументом эквивалентна componentDidMount. Если передать значение в массиве, useEffect будет вызываться только при обновлении этого значения. \`\`\`jsx useEffect(() => { // действия при монтировании компонента }, []); \`\`\`

8. Где в классовых компонентах React следует делать AJAX/API запросы?

\`componentDidMount\` - это место для AJAX запросов в React-компонентах. Этот метод выполняется при монтировании компонента (добавлении в DOM) в первый раз и только один раз за жизненный цикл компонента. Важно, что нельзя гарантировать разрешение AJAX запроса до монтирования компонента. Если это не произойдёт, попытка setState на размонтированном компоненте не сработает. Размещение AJAX запроса в \`componentDidMount\` гарантирует наличие компонента для обновления.

9. Что такое контролируемые компоненты?

В HTML такие элементы форм как \`\`, \`