Самый простой способ передать данные от родительского компонента к дочернему компоненту в приложении React — передать их через props. Но возникает проблема, когда глубоко вложенному дочернему элементу требуются данные от компонента, расположенного выше в дереве. Если мы будем передавать данные через props, каждому дочернему компоненту потребуется принять данные и передать их своему дочернему компоненту, что приведет к детализации реквизита, ужасному практика в мире React.
Чтобы решить проблему с подробным описанием, у нас есть Решения для управления состоянием, такие как Context API и Redux. Но какой из них лучше всего подходит для вашего приложения?
Что такое Контекстный API?
Согласно официальной документации:
В типичном приложении React данные передаются сверху вниз (от родителя к дочернему элементу) через реквизиты, но такое использование может быть громоздким для определенных типов реквизитов (например, предпочтения локали, темы пользовательского интерфейса), которые требуются для многих компонентов внутри приложения. приложение. Контекст предоставляет способ совместного использования таких значений между компонентами без необходимости явно передавать свойство через каждый уровень дерева.
Context API — это встроенный инструмент React, который не влияет на окончательный размер пакета и интегрирован по умолчанию.
Чтобы использовать Context API, необходимо:
- Создайте контекст
2. Создайте Provider для Context.
3. Используйте данные в контексте.
Что такое Редукс?
Согласно официальной документации:
Redux — это контейнер с предсказуемым состоянием для приложений JavaScript.
Это помогает вам писать приложения, которые ведут себя последовательно, работают в разных средах (клиент, сервер и родной) и легко тестируются. Кроме того, он предоставляет отличные возможности для разработчиков, такие как редактирование кода в реальном времени в сочетании с отладчиком, путешествующим во времени.
Вы можете использовать Redux вместе с React или с любой другой библиотекой представлений. Он крошечный (2 КБ, включая зависимости), но имеет большую экосистему доступных дополнений.
Redux — это библиотека с открытым исходным кодом, которая предоставляет центральное хранилище и действия для изменения хранилища. Его можно использовать с любым проектом, использующим JavaScript или TypeScript, но поскольку мы сравниваем его с Context API, мы будем придерживаться >Приложения на основе React.
Чтобы использовать Redux, вам необходимо:
- Создайте редуктор
2. Настройте Магазин.
3. Сделайте Магазин доступным для потребления данных
4. Используйте State или Dispatch Actions.
Сравнение Redux и Context API
Из таблицы вы должны понять, откуда взялось популярное мнение Redux для больших проектов и Context API для маленьких.
Оба являются отличными инструментами для своей конкретной ниши, Redux является излишним только для передачи данных от родительского к дочернему, а Context API действительно блестит в этом случае. Когда у вас много динамических данных, Redux вас поддержит!
