Есть несколько новых вещей, связанных с редьюсерами, чистыми функциями, побочными эффектами, useEffect(), асинхронными вызовами и контекстом, с которыми я столкнулся при создании своего приложения для электронной коммерции. Давайте посмотрим их один за другим.
React предоставляет нам несколько хуков для управления состоянием нашего приложения. Два из них — это useState() и useReducer(). useState и useReducer в основном выполняют работу по предоставлению состояний и функции для обновления/установки состояния. Итак, что именно следует использовать? Должны ли мы использовать useState() или использовать uesReducer(), если оба они выполняют одну и ту же задачу! 🤔
Почему мы должны использовать useReducer()?
useReducer лучше использовать, когда текущее состояние зависит от предыдущего состояния.
Его можно использовать, когда состояние состоит из более чем примитивных значений, таких как вложенные объекты или массивы.
useReducer дает вам больший контроль над управлением состоянием и помогает оптимизировать производительность для компонентов, которые запускают глубокие обновления, поскольку вы можете передать диспетчеризацию вместо обратных вызовов.
Редьюсеры — это чистые функции. Это означает, что у них нет побочных эффектов, и они возвращают одинаковый результат при одинаковых входных данных. Они не мутируют внешние объекты. Всегда помните, что мы не должны изменять исходное состояние в редюсерных функциях.
обработка sort()
sort — это нечистая функция, в отличие от map и filter, которые являются чистыми, поскольку она изменяет исходный массив и не возвращает новый массив. В качестве обходного пути вместо сортировки данных, например
data.sort((a,b)=›возврат a-b )
мы можем сделать что-то вроде этого
[…data].sort((a,b)=›return a-b ) Это вернет новый отсортированный массив, и мы не изменяем исходные данные.
Что ж, приложение электронной коммерции может иметь несколько состояний, и управление всеми ими может быть утомительной работой. В таких ситуациях можно использовать контекстный API, чтобы избежать ненужных деталей и упростить управление состоянием!
КОНТЕКСТ API
Context API — это встроенный инструмент React, используемый для управления состоянием. Это в основном решает проблему опорного бурения.
Чтобы использовать контекст: -
- Создать контекст
- Создать провайдера для контекста
- Потребляйте данные в контексте
Контекст можно использовать во время
- Настройка темного и светлого режимов в приложении.
- Добавление локализации в приложения React.
- Добавление аутентификации.
Почему мы используем IIFE внутри useEffect()???
В большинстве случаев внутри useEffect() мы делаем асинхронные вызовы для получения данных из API или бэкенда. При этом вы могли столкнуться с этим предупреждением,
Предупреждение: функция usEffect должна возвращать функцию очистки или ничего. Промисы и useEffect (async() не поддерживаются)
Когда мы используем асинхронную функцию внутри useEffect, она возвращает обещание. Но useEffect не ожидает, что функция обратного вызова вернет обещание, скорее, она ожидает, что ничего не будет возвращено или же будет возвращена функция.
В качестве обходного пути для этого предупреждения мы можем использовать самовызывающуюся асинхронную функцию внутри useEffect().
Чтобы сделать его более понятным, вы можете определить функцию, а затем вызвать ее.
Вот и все, чему я научился при разработке своего приложения для электронной коммерции. Я столкнулся с множеством новых вещей, и я попытался поделиться некоторыми из них выше.
Спасибо, что дочитали до конца.
Удачного кодирования! Приятного обучения! 😃
Не стесняйтесь связаться со мной в Twitter, LinkedIn и Github.
