Повторное использование логики компонента с помощью настраиваемых хуков React

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

Пример

Давайте рассмотрим компонент более высокого порядка, который дает ссылку на узел HTML и функцию для загрузки дополнительных данных, превращает любой список в список с бесконечной прокруткой:

Вот соответствующий код:

А вот как он используется в компоненте:

Переписывание компонента более высокого порядка как пользовательского крючка

Давайте теперь попробуем использовать React Hooks для реализации того же поведения, что и Custom Hook.

Импорт и определение

Нам больше не нужно импортировать Component, вместо этого нам понадобятся хуки useState и useEffect. И нам даже не нужно импортировать React, поскольку JSX больше не будет обрабатываться в нашем Custom Hook.

Затем определите наш Custom Hook как функцию:

Проверьте, нужно ли загрузить больше предметов

Функция shouldLoadMoreItems остается практически неизменной, за двумя исключениями. Тривиальная проблема заключается в том, что теперь мы ссылаемся на аргументы функции, а не на свойства компонентов. Менее тривиально то, что isLoading нельзя просто передать в обработчик функции в качестве значения, потому что значение будет меняться между визуализацией по мере загрузки большего количества данных. Поэтому мы передадим его как функцию, возвращающую текущее значение isLoading и выполняющую ее в shouldLoadMoreItems следующим образом:

Обработчик событий окна

Обработчики событий остаются точно такими же, за исключением ссылок на аргументы функций, заменяющих ссылки на свойства компонентов:

Крючки жизненного цикла

Затем нам нужно переписать componentDidMount и componentWillUnmount на useEffect:

Оказывать

Вот и все. Мы ничего не будем рендерить, поэтому этот небольшой фрагмент кода полностью исчезнет:

Конечный результат

Вот полный код функции:

Использование Custom Hook

В списке Component, также переписанном как Function Component, мы используем созданный Custom Hook точно так же, как мы использовали бы любой из встроенных хуков:

Вы можете просмотреть полный код как с компонентом более высокого порядка, так и с помощью Custom Hook в репозитории GitHub.

Подробнее о крючках

Эта статья - вторая часть моей короткой серии о React Hooks: