内容简介:几个月前React Hooks正式发版,在正式发版之前,发布了alpha版本,这时就已经有很多人开始分享React Hooks的使用方式和经验。笔者也是等到了正式发版稳定后才开始学习,这次在原来高仿B站视频弹幕的基础上使用Hooks开发了直播功能Hooks官方介绍说由于一些原因,才引入了Hooks,比如
几个月前React Hooks正式发版,在正式发版之前,发布了alpha版本,这时就已经有很多人开始分享React Hooks的使用方式和经验。笔者也是等到了正式发版稳定后才开始学习,这次在原来高仿B站视频弹幕的基础上使用Hooks开发了直播功能
Hooks
Hooks官方介绍说 不用写class组件就能使用state和其它class组件的特性 ,这简直是Functional programming党的福利,我们知道React中一个function就是一个组件,hooks的引入把React变得更加函数化
由于一些原因,才引入了Hooks,比如 this
关键字不同与其它语言,需要理解 this
在javascript中是如何工作的。事件处理的时候处理函数必须绑定this关键字或者需要声明成类的属性,这个语法目前还是不稳定的。class组件中 componentDidMount
和 componentDidUpdate
可能都需要编写数据抓取代码,那么就需要写两份相同的代码,某些情况下需要在 componentDidMount
中设置事件监听,在 componentWillUnmount
中移除事件监听,相关连的代码被拆分,很容易出现bug
官方没有打算移除class组件,不建议用hooks重写class,而是推荐在新的代码中尝试使用Hooks
想学习Hooks的童鞋可以到移步到官方文档(英文 中文 )
class组件的方法和hooks对应如下
useState useState React.memo useEffect
在使用 useEffect
时,第二个参数很重要,传入 []
,表示在组件mount时候回调,组件update时不回调,类似class组件中的 componentDidMount
。函数组件中的内部函数使用了 props
或 state
,并且在 useEffect
回调函数中调用,该函数一定要放到 useEffect
的回调函数中定义,同时把使用的 props
或 state
传入第二个参数数组中作为依赖。以下两种情况可以在 useEffect
外部定义函数
- 函数不依赖props或state
- 函数是一个纯函数,没有副作用,没有数据请求
class组件的 setState
方法用来更新state,它的第二个参数是一个回调函数,在组件update后回调,Hooks暂时没有对应的替代方案,知道了组件更新时需要的时间后,可以用 setTimeout
进行hack
直播
近几年来,直播非常火热,主播用一台电脑或手机不出门就能赚钱,看直播成为了年轻人的一种娱乐方式
做一个直播需要客户端和服务端配合,客户端录制画面,把视频流推给服务器,服务器对视频流进行转码,转成各种格式的视频流,在播放直播的时候,客户端从服务端拉取直播流进行播放。某里,某讯在直播这块都有一整套的解决方案,只要花钱就很容易搭建起一套直播服务
常见的直播协议有RTMP、 HLS 和 FLV
- RTMP 协议实时性高,常用来要求延时很短的视频流,但出现卡顿的概率高
- HLS 协议延时相对较大,但观看体验好,手机端天然支持
- FLV 居于两者之间,是延时和卡顿相对平衡的播放协议,国内用户使用较多
这三种协议网上都有详细的说明
各平台支持情况如下
平台 | RTMP | HLS | FLV |
---|---|---|---|
Android | 支持 | 支持 | 支持 |
IOS | 支持 | 支持 | 支持 |
PC | 支持(需要flash) | 支持(video+hls.js) | 支持(video+flv.js) |
移动端(Android) | 不支持 | android4.0+ | 不支持 |
移动端(IOS) | 不支持 | 支持 | 不支持 |
Android和IOS上这三种都支持
移动端对HLS天然支持,最好的选择
PC web端不支持video需要用flash播放,支持video时可以用FLV或HLS,但video不支持flv格式,使用B站开源的 flv.js 就可以播放flv格式的直播流,它是通过将flv转成mp4格式,再用 Media Source Extensions API 喂给video进行播放。 hls.js 实现了HLS协议的客户端,它同样需要video和Media Source Extensions API的支持,PC端暂不支持hls,如需播放hls流,就要用到hls.js。HLS延时性较大,在PC端播放直播时一般不采用,但是由于体验好,在点播的时候优先采用HLS
还有一种基于HTTP的动态自适应流DASH,它通过一种自适应的比特率流技术,使高质量的流媒体可以通过 HTTP 协议进行传输,在播放时根据网络条件自动选择码率进行播放。类似HSL,DASH将内容分割为一个或多个片段,每个片段包含很短长度的可播放内容,并且有一个媒体描述片段信息(MPD文件),它还支持多种编码格式
本例中使用的是HLS直播流,很多直播网站的移动端在pc浏览器上调试无法播放,这里笔者使用了hls.js,在pc上同样也可以播放HLS流(Chrome 70及以上会有 net::ERR_CERT_SYMANTEC_LEGACY
错误),想在chrome上观看hls直播流请看下面一段
另外笔者高仿了一个直播网站PC端,使用了FLV直播流,在支持video和Media Source Extensions API的浏览器上都可以进行播放,戳这里,对应的移动端戳这里,使用的是HLS直播流
以上所述就是小编给大家介绍的《React Hooks高仿B站Web移动端直播》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 网络爬虫直播观看总结(掘金直播第十期)
- 一文盘点直播技术中的编解码、直播协议、网络传输与简单实现
- 一文盘点直播技术中的编解码、直播协议、网络传输与简单实现
- 直播与 RTC 融合
- 直播协议
- 熊猫直播技术架构演进
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
More Effective C++(中文版)
梅耶(Scott Meyers) / 侯捷 / 电子工业出版社 / 2011-1-1 / 59.00元
《More Effective C++:35个改善编程与设计的有效方法(中文版)》是梅耶尔大师Effective三部曲之一。继Effective C++之后,Scott Meyers于1996推出这本《More Effective C++(35个改善编程与设计的有效方法)》“续集”。条款变得比较少,页数倒是多了一些,原因是这次选材比“一集”更高阶,尤其是第5章。Meyers将此章命名为技术(tec......一起来看看 《More Effective C++(中文版)》 这本书的介绍吧!