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

Это окончание невероятной информации про react.

...

реквизита).
- Вдохновленный потоковой архитектурой Facebook
2. Каковы основные составляющие Redux?
- Actions
- Action — это простые объекты Javascript со свойством type, указывающие, какой тип действия выполняется
Action отправляются в центральное хранилище с помощью store.dispatch ()
Action обычно создаются функциями Action Creator, которые при некотором вводе генерируют соответствующее действие.
Переходники
Reducers — это функции, которые принимают Action и текущее состояние и возвращают результирующее состояние.
Reducers должны быть чистыми функциями и не иметь побочных эффектов
хранить
Store — это центральный объект, который поддерживает и обновляет состояние приложения.
Store также занимается регистрацией и отменой регистрации слушателей.
3. Как работает Redux?
- Redux вращается вокруг строгого однонаправленного потока данных
Первое: действие отправляется в магазин через store.dispatch (действие)
- Второе: Redux определяет результирующее состояние, вызывая функцию Reducer.
- Третье: корневой редуктор объединяет вывод нескольких редукторов в одно дерево состояний .
- Четвертое: Store сохраняет новое дерево состояний и уведомляет зарегистрированных слушателей.
4. Что такое Redux Selector?
- Селектор — это функция, которая принимает состояние хранилища Redux и возвращает полученные данные из этого состояния.
- Селекторы позволяют минимально сохранять состояние хранилища Redux, вычисляя данные вне состояния.
- Селекторы обеспечивают лучшее разделение задач, сохраняя компоненты свободными от логики преобразования состояний
- Вычисления селектора могут быть запомнены, чтобы предотвратить дополнительные вычисления
- Селекторы также могут быть составлены и повторно использованы в приложении
5. Что такое Redux Toolkit?
- Redux Toolkit: официальный самоуверенный набор инструментов -Redux, позволяющий быстро приступить к работе с Redux, не беспокоясь о шаблоне. Поставляется с готовыми функциями и утилитами, которые помогают легко настроить магазин и создавать действия и редукторы.
- Redux Toolkit поставляется с широко используемыми аддонами Redux:
- Redux Thunk — промежуточное ПО для асинхронной логики
- Повторный выбор — легко создавать запомненные селекторы
6. Что такое контекстный API?
- Как и Redux, Context API — это решение для управления состоянием
- Контекст является официальной функцией в рамках React 16.3.
- Контекст состоит из 3 основных частей:
- Объект Context создается с использованием React.createContext (defaultValue)
- Провайдер — это компонент, который инициирует повторное рендеринг всех потребителей-потомков при изменении его значения.
- Потребитель — это компонент, который подписывается на изменения контекста.
7. Как мне решить глобальное управление состоянием с помощью Hooks?
- Передавая useContext контекстному объекту, компоненты функции могут подключаться к изменениям ближайшего соответствующего провайдера и будут перерисовываться при обновлении
- Компоненты функций могут альтернативно по-прежнему использовать потребителей для подписки на обновления контекста, хотя useContext, возможно, более читабелен.
6. Как Context API сравнивается с Redux и когда вы используете один поверх другого?
- Настройка для Redux требует больше дополнительной работы, чем Context, так как Context встроен в React.
- Для более мелких вариантов использования более простых вариантов использования контекста должно быть достаточно
- Redux разрешает доступ к промежуточному программному обеспечению, которое запускает функцию после отправки действия
- Redux предоставляет доступ к надежному инструменту отладки Redux — DevTools, который позволяет вам путешествовать во времени и шаг за шагом видеть изменения, внесенные в ваш магазин.

Итоги

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

Уважаемые читатели! Если сегодня состоялось ваше первое знакомство с React — просим поделиться впечатлениями.

file app.css https://intellect.icu/examples/react/app.css
Файл app.js https://intellect.icu/examples/react/app.js

index.html https://intellect.icu/examples/react/index.html

[[frame]]

Исследование, описанное в статье про react, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое react, react lifecycle и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Фреймворки. Famworks ( программная платформа)

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

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

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