拯救react的hooks：react的問題和hooks的做用

react組件和react組件邏輯複用

react是一個視圖層組件方案，最核心的功能就是綁定視圖與數據和邏輯，實現響應式的渲染。react的組件最核心的就是渲染出的Vdom，也就是jsx的部分。

渲染jsx的這部分邏輯封裝在一個函數內就能夠了，這就是函數組件，組件的最基本形態。渲染結果只與參數有關，參數相同，每次渲染結果都相同。但有的狀況下，每次渲染是不相同的，須要一個上下文來保存狀態，因此會用class來封裝這部分邏輯，渲染的那部分核心邏輯移到了render函數中，這就是 class 組件，組件的第二種形態。類組件除了可以保存狀態，使得每次渲染結果與狀態有關以外，還能夠在一些組件的執行階段加入一些處理邏輯，也就是生命週期函數。

組件之間有複用的需求，有一些可複用的邏輯須要從組件中抽取出來，變成可複用的形態，函數的邏輯複用套一層函數就行了，也就是高階組件（HOC），類組件的複用能夠傳入一個參數做爲渲染內容，其他部分爲可複用部分，這就是render props。 這兩種方案就是16.8版本以前的react所支持的組件間邏輯複用方案了。

邏輯複用方案hoc和render props的問題

但render props會多生成一層組件，HOC會改變組件名，這樣在調試時會發現組件樹特別不直觀。並且類組件的方案中處理同一個事情的邏輯可能會散亂在多個生命週期函數中，使得組件變得愈來愈臃腫。種種緣由，使得類組件、函數組件這兩種組件形態，和HOC還有render props這兩種擴展方式急需進行變革，來解決愈來愈嚴重的組件維護和邏輯複用問題。

hooks 的設計思路

渲染出Vdom也就是jsx的部分，是一個組件最核心的功能，使用類組件只是由於有一些狀態須要上下文來管理，因而按照這個思路，react在16.8中加入了hooks，能夠在函數組件中添加一些有本身獨立上下文管理的狀態（useState），再也不依賴於類組件，同時一些邏輯也能夠放到hooks中來複用(useEffects)。

注意，hooks之間的狀態是各自獨立維護的，這和mixins不一樣，mixins只是會把邏輯混到一個上下文中，使得之間會相互影響。而每一個hooks之間都是獨立的上下文，不會有mixins方案的問題。

這樣以後組件形態就在函數組件（無狀態），類組件以外多了函數組件（hooks管理狀態）的第三種組件形態，擴展方式也在HOC、render props以外加入了hooks的組合的方案（custom hooks）。這樣就完美的解決了組件樹不直觀、類組件難維護、邏輯不易複用這幾個問題。

hooks的優缺點

hooks至關於補充了一個render先後的生命週期，不少邏輯能夠移到這裏面來，可以優雅的實現以前要在多個生命週期中才能完成的功能。具體的一些例子能夠看(官方文檔 )。

固然hooks也不是完美的，他也有本身的問題，好比hooks是每次渲染都執行的，因此性能是個問題，react的useEffects hooks支持第二個參數，能夠傳入依賴的狀態變量，只有在變量改變時纔會執行，也能夠傳入一個空數組，這樣就只執行一次。

總結

視圖層組件最核心的就是渲染出vdom也就是jsx的部分，函數組件是基本形態，有狀態時可使用類組件形態，組件間邏輯複用可使用函數組件的HOC和類組件render props來實現，但這種狀態下，存在組件樹不直觀、類組件難維護、組件的有狀態邏輯難複用的問題，因此react 16.8加入了hooks的方案。每一個hooks獨立的上下文來維護狀態，能夠添加到函數組件中，這樣函數組件就能夠完成一些有狀態的邏輯。邏輯複用方案也在HOC和render props以外加入了 custom hooks的方式。但hooks也不是完美的，他也有性能問題，由於每次render 都會調用，因此須要指定依賴的狀態變量來優化性能。

hooks拯救react於一些愈來愈突出的問題之中，算是react的一個轉折點吧。