Как удалить Redux из вашего приложения
В основном мы используем Redux для управления состоянием в нашем приложении. Это помогает нам отлаживать состояние с лучшей визуализацией. Однако это влияет на производительность приложения, потому что нам нужно писать действия, редукторы и т. Д. Для Redux, и это увеличивает средства визуализации компонента. Основным недостатком Redux является размер файла, потому что нам нужно использовать redux, react-redux, redux-thunk и т. Д.
Начнем с крючков. Хуки - это предопределенный метод в React. Они быстрые и легкие, и нет необходимости использовать дополнительные библиотеки. Перехватчики React были введены в React 16.8, но многие разработчики до сих пор не знакомы с ними.
Примечание: хуки можно использовать только в функциональном компоненте.
Пример React Hook
Давайте создадим ловушку состояния, в которой мы будем управлять одним состоянием:
Приведенный выше пример предназначен для простого управления состоянием. Чтобы узнать больше о жизненном цикле хука, смотрите документацию ниже:
Наш пример не решит проблему передачи состояния между компонентами. React использует контекст для решения этой проблемы, но с хуками контексты отличаются от контекста компонента класса. Контекст может использовать компонент класса с помощью свойств.
Пример контекста реакции с хуками состояния
Создадим контекст и используем его в хуках:
Для темы созданы контекст и ловушка. Теперь мы будем использовать их в компоненте:
Затем мы можем использовать ловушку в дочерних компонентах:
Пример контекста React с хуками-редукторами
В этом примере мы использовали контекст с помощью ловушки React. Это очень просто и легко поддерживать, но если у нас есть большой объем данных (например, объект со многими ключами), хранить его в ловушке состояния не очень хорошая идея, потому что если вы забудете ключ, который нужно установить в состояние, он может сломать ваше приложение. В React есть перехватчики-редукторы для поддержки большого количества данных в перехватчике.
Примечание. Нельзя одновременно использовать обработчики состояния и редюсера.
Давайте создадим пользовательский контекст для хранения данных пользователя, статуса входа, токенов и т. Д.
В приведенном выше файле мы создали пользовательский контекст с редуктором. Давайте использовать это в компонентах. Во-первых, нам нужно использовать поставщика в родительском компоненте:
Теперь мы можем использовать ловушку useUser в дочернем компоненте:
Заключение
Надеюсь, вы поняли этот пример. Я прикрепил ссылку на репозиторий GitHub ниже. Клонируйте его и запустите в своей локальной системе, чтобы лучше понять.
