最近在項目中使用了react hooks, 總結了一些相關的知識點可以有助於我們更好地瞭解和使用react hooks。
本文並不涉及react hooks語法，用法等知識點，需要了解的可以移步官網，講述的已經很詳細了~
React hooks
首先，我們來看看react hooks是什麼？
其實很簡單， 它就是`可以在函數中勾入React的state和生命週期等特性的函數``。拆解一下就是，它是個函數，只是在這個函數中可以勾入react的相關特性。
使用hook的動機
那我們再來看看，爲什麼要使用hooks呢？ 它能幫我們解決哪些問題？
- 邏輯之間複用狀態複雜：
- 嵌套地獄，使得組件業務邏輯複雜
- 使用class讓人難以理解： 生命週期函數經常包含不相關的邏輯，但又把相關邏輯分離到幾個不同方法中。hook允許我們按照代碼的用途分離他們。React將按照effect聲明的順序依次調用組件中的每一個effect。
- 熱重載不穩定，影響component folding的性能
使用hook的規則
- 只在最頂層使用hook(不要在什麼條件函數或者循環裏面嵌套, 否則有可能會破壞useState的執行順序，導致React會因爲hook的調用順序不同而不知道每一個useState對應哪一個state)。
- 只在React函數中調用hook。
使用hook時需要注意的點
- hook不能在class中使用
- hook只能在最外層調用。不要在循環、條件判斷或者子函數中調用。
- 只能在React的函數組件中調用hook。不要在其他js函數中調用。（或者在自定義hook中調用）。
- hook是一種複用狀態邏輯的方式，它不復用state本身。hook的每次調用都有一個完全獨立的state。因此可以在單個組件中多次調用同一個自定義hook。
- hook使用了JavaScript的閉包機制，而不用在javaScript已經提供瞭解決方案的情況下，還引入特定的React API。
- react保證了每次運行effect的同時，DOM都已經更新完畢。
自定義hook
如果函數的名字以use開頭，並調用其他hook, 我們就說這事一個自定義hook。 useSomthing的命名約定可以讓我們的linter插件在使用hook的代碼中找到bug。
兩個組件中使用相同的hook不會共享state。
自定義hook是一種重用狀態邏輯的機制，所以每次使用自定義hook時，其中所有的state和副作用都是完全隔離的。
useState
在hook的useState中，setState和class中的setState的不同是：
不會把新的state和舊的state合併，而是直接替換（所以寫數組和對象時不用考慮引用？）
如果effect返回一個函數，React將會在執行清除操作時調用它（清除操作發生在什麼時候？組件卸載的時候？）
effet的清除階段在每次重新渲染時都會執行，而不是隻在卸載組件的時候執行一次。
useEffect
相當於替代componentDidMount, componentDidUpdate(忘記正確地處理該生命週期函數是React應用中常見的bug來源), componentWillUnmount等生命週期。它是通過函數副作用實現的。
React中的副作用指的是：
- 數據獲取
- 設置訂閱
- 手動更改React組件中的DOM
以上都屬於副作用。
react中有兩種常見的副作用操作： 需要清除和不需要清除的。
不需要清除的場景你自己知道
如果訂閱了外部數據源，一定要清除effect,可以防止引起內存泄漏。
這個函數告訴React組件需要在渲染後執行某些操作。React會保存你傳遞的函數，並且在執行DOM更新之後調用它。
但與生命週期不同的是： 使用useEffect調度不會阻塞瀏覽器更新屏幕。
每次渲染後都執行清理或者執行effect可能會導致性能問題，所以可以給useEffect傳參，對比preState。
reference
在學習hooks的時候參考的一些網站~
官網
hook如何fetch data
when to useMeme and useCallback
react hooks中的一些格式插件eslint-plugin-react-hooks
react hooks中的一些格式插件exhaustive-deps