React Hooks高仿B站Web移動端直播

前言

幾個月前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對應以下

• constructor：函數組件沒有，直接在函數體內使用useState初始化
• getDerivedStateFromProps：在函數組件內使用useState保存props，props變動時作相應的邏輯處理
• shouldComponentUpdate：使用React.memo
• render：函數組件自己
• componentDidMount, componentDidUpdate, componentWillUnmount：useEffecthook包含了三個生命週期方法

在使用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錯誤）

屏幕截圖

源碼

Github

Hooks相關代碼在src/views/live目錄下

以爲不錯給個Star，謝謝啦～