react組件和react組件邏輯復(fù)用

react是一個視圖層組件方案攻人，最核心的功能就是綁定視圖與數(shù)據(jù)和邏輯，實(shí)現(xiàn)響應(yīng)式的渲染悬槽。react的組件最核心的就是渲染出的Vdom怀吻，也就是jsx的部分。

渲染jsx的這部分邏輯封裝在一個函數(shù)內(nèi)就可以了初婆，這就是函數(shù)組件蓬坡，組件的最基本形態(tài)。渲染結(jié)果只與參數(shù)有關(guān)烟逊，參數(shù)相同渣窜，每次渲染結(jié)果都相同。但有的情況下宪躯，每次渲染是不相同的，需要一個上下文來保存狀態(tài)位迂，所以會用class來封裝這部分邏輯访雪，渲染的那部分核心邏輯移到了render函數(shù)中，這就是 class 組件掂林，組件的第二種形態(tài)臣缀。類組件除了能夠保存狀態(tài)，使得每次渲染結(jié)果與狀態(tài)有關(guān)之外泻帮，還可以在一些組件的執(zhí)行階段加入一些處理邏輯精置，也就是生命周期函數(shù)。

組件之間有復(fù)用的需求锣杂，有一些可復(fù)用的邏輯需要從組件中抽取出來脂倦，變成可復(fù)用的形態(tài)，函數(shù)的邏輯復(fù)用套一層函數(shù)就好了元莫，也就是高階組件（HOC）赖阻，類組件的復(fù)用可以傳入一個參數(shù)作為渲染內(nèi)容，其余部分為可復(fù)用部分踱蠢，這就是render props火欧。 這兩種方案就是16.8版本之前的react所支持的組件間邏輯復(fù)用方案了。

邏輯復(fù)用方案hoc和render props的問題

但render props會多生成一層組件茎截，HOC會改變組件名苇侵，這樣在調(diào)試時會發(fā)現(xiàn)組件樹特別不直觀。而且類組件的方案中處理同一個事情的邏輯可能會散亂在多個生命周期函數(shù)中企锌，使得組件變得越來越臃腫榆浓。種種原因，使得類組件霎俩、函數(shù)組件這兩種組件形態(tài)哀军，和HOC還有render props這兩種擴(kuò)展方式繼續(xù)進(jìn)行變革沉眶，來解決越來越嚴(yán)重的組件維護(hù)和邏輯復(fù)用問題。

hooks 的設(shè)計(jì)思路

渲染出Vdom也就是jsx的部分杉适，是一個組件最核心的功能谎倔，使用類組件只是因?yàn)橛幸恍顟B(tài)需要上下文來管理，于是按照這個思路猿推，react在16.8中加入了hooks片习，可以在函數(shù)組件中添加一些有自己獨(dú)立上下文管理的狀態(tài)（useState），不再依賴于類組件蹬叭，同時一些邏輯也可以放到hooks中來復(fù)用(useEffects)藕咏。

注意，hooks之間的狀態(tài)是各自獨(dú)立維護(hù)的秽五，這和mixins不同孽查，mixins只是會把邏輯混到一個上下文中，使得之間會相互影響坦喘。而每個hooks之間都是獨(dú)立的上下文盲再，不會有mixins方案的問題。

這樣之后組件形態(tài)就在函數(shù)組件（無狀態(tài)）瓣铣，類組件之外多了函數(shù)組件（hooks管理狀態(tài)）的第三種組件形態(tài)答朋，擴(kuò)展方式也在HOC、render props之外加入了hooks的組合的方案（custom hooks）棠笑。這樣就完美的解決了組件樹不直觀梦碗、類組件難維護(hù)、邏輯不易復(fù)用這幾個問題蓖救。

hooks的優(yōu)缺點(diǎn)

hooks相當(dāng)于補(bǔ)充了一個render前后的生命周期洪规，很多邏輯可以移到這里面來，能夠優(yōu)雅的實(shí)現(xiàn)之前要在多個生命周期中才能完成的功能藻糖。具體的一些例子可以看(官方文檔
)淹冰。

當(dāng)然hooks也不是完美的，他也有自己的問題巨柒，比如hooks是每次渲染都執(zhí)行的樱拴，所以性能是個問題，react的useEffects hooks支持第二個參數(shù)洋满，可以傳入依賴的狀態(tài)變量晶乔，只有在變量改變時才會執(zhí)行，也可以傳入一個空數(shù)組牺勾，這樣就只執(zhí)行一次正罢。

總結(jié)

視圖層組件最核心的就是渲染出vdom也就是jsx的部分，函數(shù)組件是基本形態(tài)驻民，有狀態(tài)時可以使用類組件形態(tài)翻具，組件間邏輯復(fù)用可以使用函數(shù)組件的HOC和類組件render props來實(shí)現(xiàn)履怯，但這種狀態(tài)下，存在組件樹不直觀裆泳、類組件難維護(hù)叹洲、組件的有狀態(tài)邏輯難復(fù)用的問題，所以react 16.8加入了hooks的方案工禾。每個hooks獨(dú)立的上下文來維護(hù)狀態(tài)运提，可以添加到函數(shù)組件中，這樣函數(shù)組件就可以完成一些有狀態(tài)的邏輯闻葵。邏輯復(fù)用方案也在HOC和render props之外加入了 custom hooks的方式民泵。但hooks也不是完美的，他也有性能問題槽畔，因?yàn)槊看蝦ender 都會調(diào)用栈妆，所以需要指定依賴的狀態(tài)變量來優(yōu)化性能。

hooks拯救react于一些越來越突出的問題之中竟痰，算是react的一個轉(zhuǎn)折點(diǎn)吧签钩。