簡介:高階組件是React 中一個很重要且比較復雜的概念,高階組件在很多第三方庫(如Redux)中都被經(jīng)常使用。在項目中用好高階組件,可以顯著提高代碼質(zhì)量。
第2章 高階組件介紹
在本章中,我們通過高階函數(shù)的概念,引出高階組件的的概念,并簡單介紹了高階組件在項目中的使用方式,最后通過@connect高階組件來強化理解高階組件
第3章 高階組件實現(xiàn)
在本章中,將會通過編寫一個簡單的高階組件,來加深對高階組件概念的理解;介紹了高階組件常用的兩種引用方式(函數(shù)傳參、class裝飾器);同時介紹了高階組件如何進行傳參,以及在被包裹的組件中如何獲取傳入的參數(shù)。
第4章 高階組件應用
在本章中,我們介紹了最常見的兩種高階組件的應用:代理方式和繼承方式的高階組件。詳細介紹了這兩種應用的區(qū)別以及應用場景。
第5章 高階組件實戰(zhàn)
在本章節(jié)中,我們通過create-react-app搭建本地開發(fā)環(huán)境,分解了TabBar組件的構成,抽象出TabBar組件的基本結構。接著我們實現(xiàn)了TabBar的靜態(tài)并布局,并且添加了點擊動作。為了更好的展示TabBar的功能,我們又給項目添加了react-router,并將react-router與TabBar完美結合,最后我們高階組件優(yōu)化TabBar組件,達到一處編寫,到處使用的目的。