Программисты всегда стремились к повторному использованию кода, и в этой статье в основном объясняется, как использовать React Hook для улучшения повторного использования кода.
Что такое React-хуки?
Хуки — это новая функция React, которая позволяет вам использовать состояние React и другие функции без написания классов. Эта функция в настоящее время выпущена в альфа-версии v16.7.0, поэтому ее не рекомендуется использовать в производственных средах.
Хотите использовать состояние React, ненавидите курсы по написанию и запутаетесь в этом? Крючки вам в помощь. Мало того, хуки также могут помочь вам элегантно повторно использовать код.
Например
Этот пример через
create-react-appДля создания, так как Hook не выпустил официальную версию, необходимо вручную установить альфа-версию react и react-dom:yarn add react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2
Напишем компонент под названиемColoredBanner, который может случайным образом изменить цвет фона, нажав кнопку:
Очевидно, что для реализации этого компонента нужно состояние для хранения цвета и событие клика для изменения состояния и переключения цвета фона.
Прежде чем не будет Хука, нам нужно создать класс, а затем передатьthis.stateа такжеthis.setStateРеализовать управление состоянием. Итак, как использовать Hook для достижения этой цели? Посмотрите прямо на код:
Вы можете видеть, что механизм состояния React также может использоваться в функциях. предоставляется вызовом ReactuseState()метод, входящий параметр является начальным значением, и возвращается массив, содержащий два объекта, одинcolor, другойsetColor, похожий наthis.stateа такжеthis.setState.
также определяет методchangeColor(), выберите цвет наугад, затем передайтеsetColorОбновить цвета.
Как повторно использовать код?
Если нам нужно написать еще один компонент, его функцию иColoredBannerКомпоненты почти одинаковые, разница только в том, что пользователю не нужно нажимать, а установлен таймер для автоматической смены фона.
мы не можем напрямую использоватьColoredBannerКомпонент, потому что в нем есть логика событий щелчка, ему нужно толькоColoredBannerВозможность случайного обновления статуса цвета в файлах .
Очевидно, нужноColoredBannerИзвлекается логика случайного обновления состояния цвета в компоненте.
Как это сделать?
Пользовательский крючок. похожий наHigher Order Components(компоненты высшего порядка) иRender Propsспособ обработки.
Пользовательский хук, который случайным образом обновляет состояние цвета:
СоздатьuseRandomColorФункция, которая принимает два параметра,colorsа такжеinitialColor,существуетchangColor()вызов методаsetColorФункция хука реализует обновление цвета. Таким образом реализуется пользовательский хук.
существуетColoredBannerИспользуемые компоненты:
Вызов пользовательского хукаuseRandomColor, передать массив цветов и инициализировать цвет, уничтожить его, чтобы вернутьcolorа такжеchangeColor.ColoredBannerКомпонент может случайным образом изменить цвет фона с помощью этого пользовательского хука.
Точно так же используйте этот хук для реализации компонентов, которые автоматически меняют случайные цвета фона. Для достижения цели повторного использования кода.
Помимо улучшения возможности повторного использования кода, пользовательский хук также дает еще одно преимущество: он может разделить глубоко вложенное состояние в проекте на маленькие хуки, что может не только избежать проблемы сбоя обновления, но и облегчить последующее расширение и обслуживание.
Спасибо за прочтение
Ссылаться на:
Simple Code Reuse with React Hooks
React Hooks in Action: Building a Todo App (hint: no classes)