* 跳出class的組織方式，函數式組件更好復用
* 有了鉤子，你可以在組件中按照代碼塊的相關性組織副作用，而不是基于生命周期方法強制進行切分，相關聯的邏輯也不會被強行拆分開
* 不要在循環、條件、或者嵌套函數中調用hooks，并且最好在函數頂層使用。確保
* 不要在常規的函數中調用hooks，應該在react函數組件中調用
* 如果想要加條件，可以將if條件放到hook內部
### useState
```
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
return () => {
document.title = `default title`;
}
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
* 接受一個初始值，返回一個數組包含2個元素，一個是當前的狀態，一個是設置狀態的函數。初始值只有第一次有用
* hooks只能在函數最頂層使用，必須use開頭，可聲明多個
### useEffect
* 用來替代class用法中的聲明周期，更好的組織和復用代碼。React將運行useEffect的時機放到了瀏覽器繪制之后
* 第一次render完成后會調用一次，類似componentDidMount。并且每次render后都會再調用一次，類似componentDidUpdate
* 接受一個函數作為參數，調用完成之后會將其銷毀（如果有銷毀函數的話），每次調用內部都會新傳遞一個函數，包含了最新的狀態值，避免存儲了錯誤的狀態
* 可以return一個函數出去，這個函數會在組件unmount的時候調用（如上），類似componentWillUnmount可以用于清除一些狀態，每次render之后調用effect，然后執行完成之后調用return的銷毀函數
* useEffect接受第二個參數，是一個數組的形式。它會去判斷傳進來的這個參數，之前的值和現在的值有沒有什么變化，如果沒有變化，將不會去重新應用和銷毀。如果傳遞的數組有多個項目，當中只要有一個不同的，那么都會重新應用。（類似于componentDidUpdate的優化）
* 你也可以傳遞一個空數組，這樣你的效果只會運行及清理一次
### useContext
### useReducer
### useCallback
```
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
```
只要有一個方式變化，都會調用回調
### useMemo
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
傳遞一個計算函數，和一個數組，當數組中的值發生變化時，會調用這個計算函數
### useRef
### 參考文檔
https://zhuanlan.zhihu.com/p/50597236
