Как и большинство разработчиков, которых я знаю, я многому многому учусь каждый день на работе. Это часть того, почему я хотел сделать программирование частью моей работы!
Мне очень нравится добраться до сразу применить Новые вещи, и это также помогает мне учиться лучше. Несмотря на то, что я читал много объяснений и несколько учебных пособий, я не начал Grok React Hooks, пока мне не нужно было копаться в Daily React Video Chat Demo Анкет
Когда я думаю о ролях Использоватьэффект , Usememo и UseCallback Играйте в приложении для видеочата, что многие из нас используют каждый день, мне лучше помнить, как работает каждый крюк, и распознавать другие возможности для их использования.
В случае, если чтение об этом практическом приложении тоже может вам помочь, я решил написать об этом! После быстрого повышения крючков мы рассмотрим пример каждого этих крючков в ежедневных Демо -приложение и почему мы решили использовать каждый.
Я упоминал в своем последнем посте о избегая глобальных переменных Что я пытаюсь поправиться в том, чтобы поделиться тем, чему меня учат мои коллеги. Этот раунд принес нам неповторимый Джесс Митчелл , с кем я так благодарен работать и учиться!
Прежде чем мы получим крюк
Мне очень понравилось определение крючков Али Спиттеля на последнем подкасте божьей коровки:
«Крючки – это особый тип функции, которая позволяет вам подключаться к жизненному циклу компонентов компонентов React. Таким образом, они позволяют вам делать особые вещи, которые нормальная функция не сможет выполнить ».
Это означает, что мы можем делать уникальные вещи, когда компоненты устанавливают, обновляются и не разбираются. Как Документы говорят , мы можем воспользоваться государственными и другими функциями без необходимости писать компоненты классов.
Имея в виду этот обзор, давайте посмотрим на три крючка в нашем приложении видеочата: Использоватьэффект , Usememo, и UseCallback Анкет
Использовать эффективность для управления обновлениями участников в штате
С Использоватьэффект , хорошо, мы можем выполнить побочные эффекты в функциональных компонентах, на основе изменений состояния или опоры.
В приложении видеочата происходит много вещей! Участники присоединяются и оставляют звонки, запускают и останавливают свои аудио и видео треки, а затем некоторые. Наш пользовательский интерфейс должен обновить вместе с этими изменениями. Например, он должен добавлять и удалять видео треки, когда участники приходят и уходят.
Daily API Пожары соответствуют События Как это происходит, например, 'Участник-соединенный' , 'Track Stopped' , и т.д. В нашем приложении для видеочата мы слушаем эти события, и их обработчики устанавливают наши Partindupdated состояние в ответ.
Вот где Использоватьэффект приходит в! Нам нужно обновить пользовательский интерфейс только тогда, когда произошло изменение, когда Участник установлен. Мы проходим Участник В качестве зависимости (наряду с объектом вызова, который содержит обновленные данные участника) к Использоватьэффект Хук, поэтому мы обновляем наш список участников только тогда, когда что -то изменилось.
useEffect(() => {
if (participantUpdated) {
const list = Object.values(callObject?.participants());
setParticipants(list);
}
}, [participantUpdated, callObject]);
Это охватывает хранение списка участников, но как насчет отображения участников, отображающих свои видео и аудиополипы? Вот где входит наш следующий крючок.
Usememo для повторного рендеринга видео только тогда, когда у нас к
Usememo Возвращает запоминаемое значение. Запоминание означает значение, которое является результатом дорогостоящего вызова функции.
В приложении видеочата есть много дорогих расчетов. Одна только аудио и видео -трек каждого участника содержит множество данных, и вычисление, которое при каждом рендере будет много.
Вместо этого мы передаем наш участники Значение состояния как зависимость от Usememo Крюк, который отображает наши плитки.
const displayLargeTiles = useMemo(() => {
const isLarge = true;
const tiles = participants?.filter((p) => !p.local);
return (
{tiles?.map((t, i) => (
{
sendHello(t.id);
}
}
/>
))}
);
}
}, [participants]);
Usememo Крюк позволяет нам изменить видео, отображаемые только при участники изменились, вместо того, чтобы пересматривать каждый рендер.
ПРИМЕЧАНИЕ. Поскольку мы создали приложение видеочата с изменениями участников, которые часто случаются, преимущества производительности от Usememo важны; Это спасает нас много пересчетов. Однако во многих случаях этот крюк может быть больше, чем потребности вашего приложения. Usememo имеет репутацию чрезмерное использование , так что иди с осторожностью.
UseCallback для повторного рендеринга startLeavivingCall () функции только тогда, когда у нас есть к
Так же, как Usememo Предотвращает повторную передачу значений, которые не изменились, UseCallback Позвольте нам остановить конкретные функции от повторного рендеринга.
В нашем App.js компонент , Много вещей может вызвать повторное рендеринг. Но наши StartLeavingCall Функция, например, должна повторно разрешать, если CallObject , который хранит данные о нашем вызове или нашем AppState изменения. Это потому, что функция делает разные вещи в зависимости от этих значений.
Мы проходим CallObject и AppState как наши зависимости.
/**
* Starts leaving the current call.
*/
const startLeavingCall = useCallback(() => {
if (!callObject) return;
// If we're in the error state, we've already "left", so just clean up
if (appState === STATE_ERROR) {
callObject.destroy().then(() => {
setRoomUrl(null);
setCallObject(null);
setAppState(STATE_IDLE);
});
} else {
setAppState(STATE_LEAVING);
callObject.leave();
}
}, [callObject, appState]);
Крюк и хочешь больше?
Я надеюсь, что это помогло, чтобы крючки чувствовали себя немного более применимыми! Можете ли вы придумать любые новые способы применения Использоватьэффект или Usememo , или UseCallback В приложениях, которые вы строите? Ответь мне в комментариях! Особенно скажите мне, если вы будете создавать какое -либо видео (или Audio! ) Приложения. Вы можете сказать мне крик на Твиттер тоже !
Оригинал: “https://dev.to/kimberleejohnson/learn-react-hooks-by-looking-under-the-hood-of-a-video-chat-app-3a5o”