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