React Hooks概述

react爲什麼要加入hooks

1. 沒法在組件之間複用數據處理的邏輯，或不夠直接，例如props和高階組件的實現方式

2. 複雜組件愈來愈難理解和維護，易引入bug

3. Class語法帶來複雜性

hook是什麼

• Hook是一個特殊的函數，它容許你在函數中嵌入（勾入）React的特性，好比生命週期，state等。

hook使用的基本規則

1. 只能在函數的最外層調用函數

2. 只能在React的函數組件中調用Hook

3. 自定義hook命名規則（useSomething）

什麼狀況下使用hook

• 若是你在編寫函數組件並意識到須要向其添加一些 state，之前的作法是必須將其它轉化爲 class。如今你能夠在現有的函數組件中使用 Hook

useState Hook使用建議

• 推薦將不一樣的state進行分離，單獨進行更新

useEffect

• 在React更新DOM以後運行一些額外的功能（訂閱，發送網絡請求）

• 分類（需清除和無需清楚的反作用）

重要特性

• useEffect默認狀況下每次渲染後執行，包括首次渲染

• 傳遞給useEffect的函數若返回值爲函數，此函數將在組件銷燬時執行，以執行effect的清除工做

• 若想執行只運行一次的effect（僅在組件掛載和卸載時執行），能夠傳遞空數組做爲useEffect的第二個參數

自定義hook

• 解決React組件中沒法靈活共享邏輯的問題

• 自定義hook以use開頭

• 相同hook不會共享state

Hook api

• zh-hans.reactjs.org/docs/hooks-…

參考文章

• reactjs.org/docs/hooks-…