
1. 函數(shù)組件看似只是一個(gè)返回值是DOM結(jié)構(gòu)的函數(shù),其實(shí)它的背后是無(wú)狀態(tài)組件(Stateless Components)的思想。函數(shù)組件中,你無(wú)法使用State,也無(wú)法使用組件的生命周期方法,這就決定了函數(shù)組件都是展示性組件(Presentational Components),接收Props,渲染DOM,而不關(guān)注其他邏輯。
2. 函數(shù)組件中沒(méi)有this。所以你再也不需要考慮this帶來(lái)的煩惱。而在類(lèi)組件中,你依然要記得綁定this這個(gè)瑣碎的事情。如示例中的sayHi。
3. 函數(shù)組件更容易理解。當(dāng)你看到一個(gè)函數(shù)組件時(shí),你就知道它的功能只是接收屬性,渲染頁(yè)面,它不執(zhí)行與UI無(wú)關(guān)的邏輯處理,它只是一個(gè)純函數(shù)。而不用在意它返回的DOM結(jié)構(gòu)有多復(fù)雜。
4. 性能。目前React還是會(huì)把函數(shù)組件在內(nèi)部轉(zhuǎn)換成類(lèi)組件,所以使用函數(shù)組件和使用類(lèi)組件在性能上并無(wú)大的差異。但是,React官方已承諾,未來(lái)將會(huì)優(yōu)化函數(shù)組件的性能,因?yàn)?b>函數(shù)組件不需要考慮組件狀態(tài)和組件生命周期方法中的各種比較校驗(yàn),所以有很大的性能提升空間。
5. 函數(shù)組件迫使你思考最佳實(shí)踐。這是最重要的一點(diǎn)。組件的主要職責(zé)是UI渲染,理想情況下,所有的組件都是展示性組件,每個(gè)頁(yè)面都是由這些展示性組件組合而成。如果一個(gè)組件是函數(shù)組件,那么它當(dāng)然滿足這個(gè)要求。所以牢記函數(shù)組件的概念,可以讓你在寫(xiě)組件時(shí),先思考這個(gè)組件應(yīng)不應(yīng)該是展示性組件。更多的展示性組件意味著更多的組件有更簡(jiǎn)潔的結(jié)構(gòu),更多的組件能被更好的復(fù)用。
在React組件復(fù)用與組合 中我們會(huì)提到,應(yīng)當(dāng)避免在底層的展示性組件中混入對(duì)于狀態(tài)的管理,而應(yīng)該將狀態(tài)托管于某個(gè)高階組件或者其他的狀態(tài)容器中。利用函數(shù)式聲明組件可以徹底保證不會(huì)在組件中進(jìn)行狀態(tài)操作。