## State Hook
~~~
import React, { useState } from 'react';
function Example() {
// 聲明一個叫 “count” 的 state 變量和一個讓你更新它的函數 默認是0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
~~~
**`useState`需要哪些參數？** `useState()`方法里面唯一的參數就是初始 state。
**`useState`方法的返回值是什么？** 返回值為：當前 state 以及更新 state 的函數。這就是我們寫`const [count, setCount] = useState()`的原因。
### 讀取 State
Hook 里 直接使用 變量名 count 就可以獲取 state的值(class 中需要使用 this.state.count)
~~~
<p>You clicked {count} times</p>
~~~
### 更新 State
Hook 里，直接調用`setCount` 賦值 (class 里 `this.setState()`來更新`count`值)
~~~
<button onClick={() => setCount(count + 1)}> Click me
</button>
~~~
## Effect Hook
在 React 組件中執行過數據獲取、訂閱或者手動修改過 DOM。我們統一把這些操作稱為“副作用”，或者簡稱為“作用”。
`useEffect`就是一個 Effect Hook，給函數組件增加了操作副作用的能力。它跟 class 組件中的`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`具有相同的用途，只不過被合并成了一個 API。
~~~
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// useEffect 相當于 componentDidMount 和 componentDidUpdate:
// 組件加載以后執行
useEffect(() => {
// 使用瀏覽器的 API 更新頁面標題
document.title = `You clicked ${count} times`;
});
// 這個是空數組, 只會在組件加載進入 DOM 后執行一次
useEffect(() => {
// 使用瀏覽器的 API 更新頁面標題
document.title = `You clicked ${count} times`;
}, []);
// 這個在每次count 變量改變都會觸發, 相當于vue 里的 watch 了 count變量
useEffect(() => {
// 使用瀏覽器的 API 更新頁面標題
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
~~~
當你調用`useEffect`時，就是在告訴 React 在完成對 DOM 的更改后運行你的“副作用”函數。由于副作用函數是在組件內聲明的，所以它們可以訪問到組件的 props 和 state。默認情況下，React 會在每次渲染后調用副作用函數 ——**包括**第一次渲染的時候。
跟`useState`一樣，你可以在組件中多次使用`useEffect`
### 返回值
**effect可以返回一個函數** 這是 effect 可選的清除機制, 每個 effect 都可以返回一個清除函數。React 會在**組件卸載**的時候執行清除操作。這就是為什么 React*會*在執行當前 effect 之前對上一個 effect 進行清除。
## useMemo
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
接收倆個參數, 第一個參數是一個函數, 返回值用于產生保存值, 第二個是一個數組, 是 依賴項, 類似 useEffect 第二個參數
返回一個[memoized](https://en.wikipedia.org/wiki/Memoization)值。
把“創建”函數和依賴項數組作為參數傳入`useMemo`，它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助于避免在每次渲染時都進行高開銷的計算。
記住，傳入`useMemo`的函數會在渲染期間執行。請不要在這個函數內部執行與渲染無關的操作，**諸如副作用這類的操作屬于`useEffect`的適用范疇，而不是`useMemo`。**
如果沒有提供依賴項數組，`useMemo`在每次渲染時都會計算新的值。
**你可以把`useMemo`作為性能優化的手段，但不要把它當成語義上的保證。**將來，React 可能會選擇“遺忘”以前的一些 memoized 值，并在下次渲染時重新計算它們，比如為離屏組件釋放內存。
[官方hook api](https://zh-hans.reactjs.org/docs/hooks-reference.html)
