react Hook之介紹

class.Component現存的問題：

一、難以複用stateful的代碼render props及HOC雖然解決了問題，可是對組件的包裹改變了組件樹的層級，存在冗餘。

二、與其餘語言中的class概念差別較大，須要對事件處理函數作bind操做，使人困擾。另外class也不利於組件的AOT compile，minify及hot loading。 在這種背景下，React在16.8.0引入了React Hooks。

三、在同一輩子命週期方法中，有不相關的邏輯。而相關的邏輯要寫在不一樣生命週期函數中。如在ComponentDidMount、ComponentDidUpdate、ComponentWillUnmount等生命週期中作獲取數據，訂閱/取消事件，操做ref等相互之間無關聯的操做，而把訂閱/取消這種相關聯的操做分開，下降了代碼的可讀性。

React Hook 解決了什麼問題

一、函數組件不能使用state

在React Hooks推出以前，函數組件一般只能用於一些簡單而無交互的場景，好比信息展現。當須要交互的時候咱們就得用臃腫的class組件來實現。

在React Hooks推出以後，函數組件可以使用state功能，而且比class組件更加簡潔，更加好用。

能夠預見的是，將來函數組件將會被大幅度地採用，這不只能給咱們帶來很是爽的開發體驗，同時也提升了咱們的開發效率和質量。

二、反作用的問題

一般數據獲取、訂閱、或手動修改ReactDOM這些行爲，咱們能夠稱之爲反作用(side effect)。

React Hooks提供了useEffect這個API來處理組件的反作用問題。那也就意味着你能夠在函數組件內進行數據獲取、訂閱等操做。而在class組件裏咱們須要依賴componentDidMount，componentDidUpdate，和 componentWillUnmount這幾個生命週期方法來實現。

useEffect能夠說是對這幾個生命週期方法的統一。

三、有狀態的邏輯重用的問題

在開發中咱們常常會遇到一些組件複用的問題，好比公共<Button>、彈窗、佈局、卡片等等，又或者說一些可複用的業務邏輯，好比數據請求、關注和取消關注等等。

React Hooks能夠很輕鬆地實現這些邏輯的封裝，從而達到組件複用的效果。你徹底能夠根據你的須要建立自定義的hooks。

簡單點說就是，React Hooks解決了代碼複用的問題。

這裏有一個Hooks指南網站，它裏面封裝了幾十個很是好用的hooks，而且還在不斷地新增。

四、複雜狀態管理的問題

對於複雜的狀態管理，過去咱們使用redux、dva、mobx等第三方狀態管理器來管理。

React Hooks推出以後，咱們能夠再也不依賴這些第三方狀態管理器了，咱們只須要依據React Hooks提供的API就能夠實現複雜的狀態管理。

主要就是useReducer、useContext這些API。

五、效率和質量的問題

React Hooks是純函數式開發，相比於臃腫的class組件，函數組件開發體驗更好，開發效率更高，應用性能更好。

React Hooks擴大了函數組件的應用範圍，意味着咱們能夠在絕大都數應用場景使用函數組件進行快速開發。