предисловие
Несколько месяцев назад был официально выпущен React Hooks.До официального релиза была выпущена альфа-версия.В это время многие люди начали делиться использованием и опытом использования React Hooks. Автор также дождался, пока официальный релиз станет стабильным, прежде чем начать учиться, на этот раз в оригинале.Шквал видео на станции B с высокой имитациейНа основе использования хуков была разработана функция прямых трансляций
Hooks
Официальное введение крючков сказалИспользуйте состояние и другие функции компонентов класса без написания компонентов класса, это просто преимущество партии функционального программирования.Мы знаем, что функция в React — это компонент, а введение хуков делает React более функциональным
Крюки были введены по ряду причин, таких какthisКлючевые слова отличаются от других языков и должны быть понятыthisКак это работает в javascript. При обработке события функция обработчика должна быть привязана к ключевому слову this или объявлена как свойство класса.Этот синтаксис в настоящее время нестабилен. в компоненте классаcomponentDidMountа такжеcomponentDidUpdateВам может понадобиться написать код захвата данных, тогда вам нужно написать две копии одного и того же кода, в некоторых случаях вам нужно написатьcomponentDidMountНастройте прослушиватели событий вcomponentWillUnmountУдалены прослушиватели событий из , а соответствующий код разделен, что подвержено ошибкам.
Удалять классовый компонент официал не собирается, переписывать класс с хуками не рекомендуется, вместо этого рекомендуется попробовать использовать хуки в новом коде.
Детская обувь, желающие изучить Крючки могут зайти в официальную документацию (английский китайский язык)
Методы и хуки компонента класса соответствуют следующим
- конструктор: функционального компонента нет, он используется непосредственно в теле функции
useStateинициализация - getDerivedStateFromProps: используется внутри функциональных компонентов
useStateСохраняйте реквизиты, выполняйте соответствующую логическую обработку при изменении реквизитов - shouldComponentUpdate: использовать
React.memo - render: сам функциональный компонент
- componentDidMount, componentDidUpdate, componentWillUnmount:
useEffectХук содержит три метода жизненного цикла
В использованииuseEffectКогда второй параметр очень важен, передайте[], указывающий, что обратный вызов вызывается при монтировании компонента, а не при его обновлении, подобно тому, как это происходит в классе componentcomponentDidMount. Внутренняя функция в функциональном компоненте используетpropsилиstate, И вuseEffectВызывается в функции обратного вызова, функция должна быть помещена вuseEffectопределено в функции обратного вызова, при этом помещая используемыйpropsилиstateПередайте второй массив параметров в качестве зависимости. Следующие две ситуации могут бытьuseEffectвнешне определяемая функция
- Функции не зависят от реквизита или состояния
- Функция представляет собой чистую функцию без побочных эффектов и запросов данных.
компонент классаsetStateМетод используется для обновления состояния.Вторым его параметром является функция обратного вызова, которая вызывается после обновления компонента.У хуков пока нет соответствующей альтернативы.Зная время, необходимое для обновления компонента, вы можете использоватьsetTimeoutвзломать
прямая трансляция
В последние годы очень популярны прямые трансляции, ведущие могут зарабатывать деньги, не выходя на улицу с компьютером или мобильным телефоном, просмотр прямых трансляций стал развлечением для молодежи.
Проведение прямой трансляции требует взаимодействия клиента и сервера.Клиент записывает экран и отправляет видеопоток на сервер.Сервер транскодирует видеопоток и конвертирует его в видеопотоки различных форматов.Терминал тянет прямой эфир. для воспроизведения. Где-то у некоторых новостей есть полный набор решений в прямом эфире, легко построить сервис прямого эфира, пока тратишь деньги
Распространенными протоколами потоковой передачи в реальном времени являются RTMP, HLS и FLV.
- Протокол RTMP имеет высокую производительность в реальном времени и часто используется для видеопотоков с небольшими задержками, но велика вероятность зависания.
- Задержка протокола HLS относительно велика, но качество просмотра хорошее, и мобильный телефон, естественно, поддерживает его.
- Между ними находится FLV — относительно сбалансированный протокол воспроизведения с задержкой и задержкой, который широко используется домашними пользователями.
Эти три протокола подробно описаны в Интернете.
Поддержка каждой платформы выглядит следующим образом
| Платформа | RTMP | HLS | FLV |
|---|---|---|---|
| Android | служба поддержки | служба поддержки | служба поддержки |
| IOS | служба поддержки | служба поддержки | служба поддержки |
| PC | Поддержка (требуется прошивка) | Поддержка (видео+hls.js) | Поддержка (видео+flv.js) |
| Мобильный (Андроид) | не поддерживается | android4.0+ | не поддерживается |
| Мобильный терминал (IOS) | не поддерживается | служба поддержки | не поддерживается |
Все три поддерживаются на Android и IOS.
Мобильный терминал естественно поддерживает HLS, лучший выбор
Веб-терминал ПК не поддерживает видео, и для его воспроизведения необходимо использовать флэш-память.Если он поддерживает видео, вы можете использовать FLV или HLS, но видео не поддерживает формат FLV.Используйте открытый исходный код станции B.flv.jsВы можете воспроизвести прямую трансляцию в формате FLV, преобразовав FLV в формат MP4, а затем используяMedia Source Extensions APIЗагрузите видео для воспроизведения.hls.jsКлиент, который реализует протокол HLS, также нуждается в поддержке видео и Media Source Extensions API. Сторона ПК пока не поддерживает hls. Если вы хотите воспроизвести поток hls, вам нужно использовать hls.js. HLS имеет большую задержку и обычно не используется при воспроизведении прямых трансляций на стороне ПК, однако из-за хорошего опыта HLS предпочтительнее при воспроизведении по требованию.
Существует также динамическая адаптивная потоковая DASH на основе HTTP, которая позволяет передавать высококачественные потоковые мультимедиа по протоколу HTTP с помощью технологии потоковой передачи с адаптивной скоростью передачи данных и автоматически выбирает скорость передачи данных для воспроизведения в соответствии с условиями сети во время воспроизведения. Подобно HSL, DASH делит контент на один или несколько сегментов, каждый сегмент содержит небольшую часть воспроизводимого контента и содержит информацию о сегменте описания мультимедиа (файл MPD), а также поддерживает различные форматы кодирования.
В этом примере используется прямая трансляция HLS. Для просмотра рекомендуется использовать мобильный браузер. Мобильный терминал многих веб-сайтов прямых трансляций не может воспроизводиться в браузере ПК. Здесь автор использует hls.js, а HLS поток также можно воспроизводить на ПК (Chrome 70 и выше будут иметьnet::ERR_CERT_SYMANTEC_LEGACYошибка)
Скриншоты
исходный код
Код, связанный с хуками, находится вsrc/views/liveПод содержанием
Я думаю, что хорошо дать звезду, спасибо~