Еще 8 хуков React, о которых вам нужно знать

Jan 20, 2024

Мэтью Тайсон

Архитектор программного обеспечения, InfoWorld |

React остается лидером среди фреймворков пользовательского интерфейса JavaScript. В React ведется множество разработок, но самым важным сдвигом за последние несколько лет стал переход к функциональным компонентам. Функциональные компоненты полагаются на перехватчики во многих своих возможностях. Самый распространенный хук — useState, но есть и много других.

Вот восемь полезных хуков React, о которых вы, возможно, не знали, и способы их использования.

Все знают об useState, поскольку он заменяет важную особенность компонентов на основе классов — переменные-члены для хранения состояния — функциональным эквивалентом. Хук useReducer делает нечто похожее, но для более сложных сценариев, где переходы между состояниями более сложны и приложение получает выгоду от явного выполнения переходов. Хук useReducer вдохновлен редьюсерами Redux. Его можно рассматривать как нечто среднее между простотой useState и сложностью системы управления состоянием, такой как Redux.

Вот пример того, как работать с хуком useReducer. Вы также можете увидеть редьюсер вживую в этом JSFiddle.

Цель этого примера — взять текст из поля ввода и позволить пользователю нажимать кнопки для отображения текста в верхнем или нижнем регистре. Код объявляет новый редуктор с помощью const [state, диспетчеризации] = useReducer(reducer, InitialState);. useReducer принимает функцию редуктора и начальное состояние и возвращает массив, который мы затем деструктурируем, чтобы получить переменные состояния и диспетчеризации.

Сам редуктор определяется с помощью: const редуктор = (состояние, действие) =>, что дает функцию с двумя аргументами. Всякий раз, когда в коде вызывается функция диспетчеризации, она передает текущее состояние вместе с объектом действия. В этом случае объект действия имеет поле типа, и мы используем его, чтобы определить, как изменить состояние.

В умеренно сложном приложении useReducer может быть полезен для управления сложностью и даже может использоваться в приложении совместно с использованием контекста. Когда useState сложно управлять из-за сложности приложения, может помочь хук useReducer.

Перехват useCallback — это перехват производительности. Он принимает функцию и гарантирует, что для всех вызывающих объектов будет возвращена и повторно использована только одна версия. Если функция дорогая и вызывается неоднократно циклом или дочерними компонентами, перехват useCallback может обеспечить значительный прирост производительности. Этот вид оптимизации известен как запоминание функции.

В листинге 2 приведен пример использования useCallback для использования одной и той же функции для многих элементов списка. Вот пример в живом JSFiddle.

Мы используем React.useCallback() для создания новой запомненной функции в инкрементальном счетчике. Мы можем использовать memoized функцию как обычную функцию в обработчике onClick, в списке. useCallback() принимает функцию в качестве первого аргумента. В рамках этой функции мы можем выполнять любую необходимую нам работу. Ключевое отличие состоит в том, что React просто возвращает кешированное значение функции, если что-то не изменилось в списке переменных зависимостей, которыми в нашем примере является переменная-счетчик.

Это драгоценная волшебная сила в тех случаях, когда вам нужно разделить дорогостоящую функцию между несколькими вызывающими объектами, особенно дочерними компонентами. Когда мы рассмотрим следующий хук (useMemo), имейте в виду, что useCallback сохраняет саму функцию. То есть useCallback предотвращает воссоздание фактической функции каждый раз, когда она появляется, и воссоздает ее только при необходимости.

Хук useMemo является родственником useCallback. Там, где useCallback кэширует функцию, useMemo кэширует возвращаемое значение функции. Это тонкое различие, но важное.

Когда следует использовать useMemo вместо useCallback? Ответ: используйте useMemo, когда можете, и useCallback, когда нужно. Перехват useCallback оправдан, когда снижение производительности, которого вы избегаете, связано с созданием самой функции при рендеринге, в то время как useMemo не будет препятствовать воссозданию функции, где бы она ни появлялась. Однако useMemo гарантирует, что функция вернет кэшированное значение, если зависимости не изменились.