看了這個，還怕面試官問你react hook？

前言

react因其難理解、組件結構冗餘一直被定義爲大型應用框架，對此也一直react官方一直在改進，推出了無狀態組件也稱 函數式組件 ，讓咱們拋棄不用在寫麻煩的class、render。可是咱們平常開發中大部分組件都跟業務關聯，擁有本身的狀態，函數式組件因其無狀態一直沒有進到咱們視野中。直到 React16.8 橫空出世，讓我在函數組件中用鉤子也可使用state、生命週期，使咱們應用更加靈活和簡潔，react hook也許能夠在將來某一天徹底替代class的寫法，讓我一塊兒期待吧！

正文

首先官方已經明確指出hook是徹底向後兼容的，對項目不會形成的任何破壞性，咱們徹底沒必要對以前的class組件進行整改，徹底是可選的，咱們能夠開始嘗試在新的組件中。而且在關於redux等生態也出了hook的api，因此放下因此的疑慮，也忘掉之前class組件的寫法，咱們開始吧。

hook譯爲鉤子，簡明的說就是在組件中把狀態、生命週期引進來。首先咱們先了解一下具體有

哪些鉤子。

useState

useState方法返回state當前的值和一個改變state的方法

useState參數爲state的初始值

若是初始值須要計算，也能夠傳一個回調

useEffect

useEffect一個接受接收反作用代碼的函數，例如獲取數據、設置定時器等。

如咱們想在num更新後修改網頁title

他會在組件掛載、組件更新後執行，如以前生命週期 componentDidMount 和componentDidUpdate 結合版。

• 限制

同時若是咱們不想每次更新都執行，咱們能夠在第二參數中傳一個數組，指定哪些狀態更新時觸發，若是傳一個空數組，就只有在掛載時觸發。

• 清除

咱們項目中能夠會遇到組件卸載清除上一次的訂閱或者定時器

useEffect 返回一個清除函數 在執行下一個 effect 以前，上一個 effect 就已被清除。

useContext

Context提供了組件之間傳遞數據的方法 解決了props一層層傳遞 與redux解決相同的痛點

首先建立Context

const Context = React.createContext();

使用 context.Provider 爲全部子孫代提供 value 值

在子組件中調用useContext，傳入咱們以前React.createContext建立的對象

這樣咱們能夠獲取到父組件傳過來的數據了 父組件更新時子組件也會從新渲染。

useReducer

useState的另外一種寫法，目的用必定的規則修改state，使得代碼更清晰方便測試，若是state狀態邏輯複雜仍是很是值得去用的。

與useState相似，useReducer返回state以及修改修改state的方法

useReducer & useContext 結合替代redux

在上文useContext的基礎上，咱們將useReducer返回的state、dispatch放在value中，這樣子組件就能夠訪問以及修改state,這樣咱們徹底達到了redux的效果。

總結

也是用的不是很是久有一些鉤子的理解可能不是很是深刻，用沒有寫出來，若是有疑惑的能夠一塊兒探討一下。

詳細請參考官方文檔 react.docschina.org/docs/hooks-…