# React Basice Hook Note
###### tags: `Hooks` `React` `useState` `useEffect` `useContext` `useReducer` `useMemo` `useCallback`
- useState
- useEffect
- useContext
- useReducer
- useMemo
- useCallback
# useState 狀態管理
```
const [state, setState] = useState(initState)
```
- `useState` 回傳一個 `Array`
- `state` 為要設置的 state (命名隨意)
- `setState` 為更新 state 的函式 (命名隨意)
- `initState` 為初始 state，也可以是一個 `return function`
- `useState Hook` 可以用不止一次
<br/>
## [ Init state 的 2 種方式 ]
- 傳入 data，每次 component render 都會跑一次
- 傳入 return function，只跑第一次 component render 時
```
// 每次 render 都會跑一次
const [clickCount, setClickCount] = useState(0);
const [clickCount, setClickCount] = useState(init());
// 只跑第一次 render 時
const [clickCount, setClickCount] = useState(() => init());
```
<br/>
## [ Update state 的 2 種方式 ]
- 傳入 data
- 傳入 return function，可以獲得最新的 state
```
// 傳入 data
<button onClick={() => setClickCount(clickCount + 1)}>點擊</button>
// 傳入 return function
<button onClick={() => setClickCount((pre) => pre + 1)}>點擊</button>
<button onClick={() => setUserData((pre) => { ...pre, name: 'Yellow'})}>點擊</button>
```
<br/>
## [ 延伸> 解決 useState 不及時問題 ]
先來亢亢這個
```
const [updateCount, setUpdateCount] = useState(5);
const updateCountHandle = async () => {
await setUpdateCount(updateCount + 1);
console.log('updateCount: ', updateCount); // 預期+1 後是 6，但結果一樣是5
};
const updateCountBtn = () => {
return (
<div>
<h3>最新的點擊次數是 {updateCount} 次</h3>
<button onClick={() => updateCountHandle()}>更新點擊</button>
</div>
);
};
```
React 文檔是說
> 为什么我会在我的函数中看到陈旧的 props 和 state ？
> 组件内部的任何函数，包括事件处理函数和 effect，都是从它被创建的那次渲染中被「看到」的
> (說明 console 印出來的是這次 render 出來的值)
但如果中間在加入一個 return function 呢？
```
const [updateCount, setUpdateCount] = useState(5);
const updateCountHandle = async () => {
await setUpdateCount(updateCount + 1);
await setUpdateCount((pre) => {
console.log('preState: ', pre); // 印出 6
return pre +1;
});
console.log('updateCount: ', updateCount); // 印出 5 XD
};
const updateCountBtn = () => {
return (
<div>
<h3>最新的點擊次數是 {updateCount} 次</h3> // 印出 7 woooo
<button onClick={() => updateCountHandle()}>更新點擊</button>
</div>
);
};
```
建議是不要使用以上方式這樣做判斷
> 而是使用 `useEffect` 偵測 `updateCount` 的變化並且執行要的動作
```
const [updateCount, setUpdateCount] = useState(5);
const updateCountHandle = async () => {
await setUpdateCount(updateCount + 1);
// await setUpdateCount((pre) => {
// console.log('preState: ', pre);
// return pre + 1;
// });
console.log('updateCount: ', updateCount); // 印出 5
};
useEffect(() => {
// do something
console.log('useEffect: ', updateCount); // 印出 6，恭喜~~
}, [updateCount]);
```
<br/>
<br/>
# useEffect 副作用管理
任何會產生 side effect (資料獲取、訂閱、手動修改 React Dom 等) 的行為都應該使用 useEffect 處理。
整合了 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`
```
useEffect(callback, array)
```
- `callback` 函式，用於處理 side effect 邏輯
- `array` 根據不同的設定來決定要執行 callback 的時機
<br/>
## [ 第一個參數 callback，副作用邏輯 ]
- **side effect logic** 副作用邏輯處理
- **clean up** 可以返回一個函式，用於清理工作，相當於 `componentWillUnmount`
```
useEffect(() => {
// 處理 side effect
return () => {
// Cleanup whatever we did last time
}
})
```
<br/>
## [ 第二個參數 array，用於控制執行 ]
- **once** 如果是空 array `[]`，只在元件第一次 render 時執行，相當於 `componentDidMount`
- **have change** 如果 array 有 state, 或 props 的值，當有改變時就會執行，相當於 `componentDidUpdate`
- **after every render** 當沒有定義 array 時，他會在第一次及每次 render 都會執行
```
useEffect(() => {
// 只在初次 render 時執行
console.log('once')
}, [])
```
```
useEffect(() => {
// 會在初次 render 時執行，並且當 array 內的 state 或 props 改變時也會執行
console.log('have change')
}, [state, props])
```
```
useEffect(() => {
// 他會在第一次及每次 render 都會執行
console.log('after every render')
})
```
<br/>
## [ Clean up 清理機制 ]
有兩種常見的副作用，一種是不需要清理的另一種是需要的。
- **不需要清理的** 資料請求，DOM 修改，log 紀錄等，useEffect 會自動處理
- **需要清理的** 訂閱和取消訂閱，事件監聽和取消監聽都是需要清理的
<br/>
<br/>
# useContext 方便使用 context
是 Context.Consumer 的語法糖
## [ Context 資源共享 api ]
解決層層傳遞 props 的問題 ( props drilling )，主要通過 3 個步驟：
1. 通過 `React.createContext` 創建 Context Object。
2. 使用 `Context.Provider` 包裹父元件，傳遞資源使底下 child 可以取用。
3. 使用 `Context.Consumer` 包裹子元件，取得 context 資源。
### 創建
```
const testContext = createContext({
isLogging: flase
});
// const { Provider, Consumer } = testContext;
export default testContext; // 這裡需要將 context 匯出讓 child 取用
```
### 包裹父元件，傳遞資源
```
import testContext from 'src/store/test-context'
const logoutHandle = () => {}
...
<testContext.Provider
value={{
...testContext,
logoutHandle
}}>
<MyComponents />
</testContext.Provider>
```
### 包裹子元件，取得資源
```
import { testContext } form '../ParentsComponent'; // 匯入 context
<testContext.Consumer>
{ ctx=> {
// ctx.isLogging 是通過 provider 傳下來的資源
}}
</testContext.Consumer>
```
<br/>
## [ useContext 取得資源 ]
使用 `useContext ` 代替 Consumer 取得 context 資源
### 子元件取得資源
```
import { testContext } form '../ParentsComponent'; // 匯入 context
const ChildComponent = () => {
const store = useContext(testContext)
}
```
## 注意!!
每當 useContext 更新時，底下的 child 元件都會重新 re-render，所以不常變動的值較適合使用 context 保管，或是使用 useMemo 節省效能。
<br/>
#### 延伸閱讀：[The Problem with React's Context API](https://leewarrick.com/blog/the-problem-with-context/)
<br/>
<br/>
# useReducer 複雜的狀態管理
進階版 useState，兩者都是用來儲存、更新資料。跟 Redux 很像！核心都是 store, action, reducer
## [ 基本 useReducer ]
### 參數：
- `reducer` 是一個函式，用於處理 action 並更新 state。<br />
```
(preState, action) => newSate
```
- `initState` 初始化 State。
- `initFn` 初始化 Function，useReducer 初次執行時被處理。
### 回傳：
- `state` 狀態 snapshot
- `dispatch` 更新 state 的方法，action 作為參數。
<br/>
### 如何使用：
```
const { useState, useReducer } = React;
const ACTIONS = {
INCREMENT: 'increament',
DECREMENT: 'decreament'
}
function reducer(state, action) {
const type = {
[ACTIONS.INCREMENT]: () => ({ count: state.count + 1}),
[ACTIONS.DECREMENT]: () => ({ count: state.count - 1})
}
return type[action.type] ? type[action.type]() : state
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, {count: 256})
const increase = () => {dispatch({type: ACTIONS.INCREMENT}) };
const decrease = () => {dispatch({type: ACTIONS.DECREMENT }) };
return (
<div>
<button onClick={decrease} />
<span>{state.count}</span>
<button onClick={increase} />
</div>
)
};
```
<br />
<br />
# useMemo 記憶值
用於效能優化。無關於父元件，主要用在當元件重新渲染時，通過`記憶值` 避免在元件中複雜的程式重複執行，可以減少渲染的耗時。
<br/>
適合用於 > 需要複雜計算的場景，例如 `複雜的列表渲染`，深拷貝等等。
> React 官方特別提醒
> You may rely on useMemo as a performance optimization, not as a semantic guarantee.
> 因此，不要什麼東西都丟到 useMemo 裡面，在需要優化效能時才引用，否則只是讓 React 處理更多事情，造成更大的負擔。
## [ 基本用法 ]
```
const memoizedValue = useMemo(callback, array);
```
### 參數：
- `callback` 計算邏輯函示。
- `array` 當裡面賦予的值改變時 useMemo 才會執行。
### 返回：
- 返回 callback 的返回值。
```
const obj1 = { id: '1', name: 'yellow' }
const obj2 = { id: '2', name: 'kimi', age: 18 }
const memoizedValue = useMemo(()=> Object.assign(obj1, obj2),[obj1, obj2])
// 使用
<div>{memoizedValue.age}</div>
```
<br />
<br />
# useCallback 記憶值
當父元件傳遞的 props 是 Object 時，父元件的狀態被改變觸發重新渲染，Object 的記憶體位址也會被重新分配，React.memo 會用 shallowly compare 比較 props 中 Object 的記憶體位址，這個比較方式會讓子元件被重新渲染。<br/>
因此，React 提供了 React.useCallback 這個方法讓 React 在元件重新渲染時，如果 dependencies array 中的值在沒有被修改的情況下，它會幫我們記住 Object，防止 Object 被重新分配記憶體位址。
## [ 基本用法 ]
```
const memoizedCallback = useCallback(callback, array);
```
當 useCallback 能夠記住 Object 的記憶體位址，就可以避免父元件重新渲染後，Object 被重新分配記憶體位址，造成 React.memo 的 shallowly compare 發現傳遞的 Object 記憶體位址不同。
### 參數：
- `callback` 計算邏輯函示。
- `array` 當裡面賦予的值改變時 useMemo 才會執行。
### 返回：
- 返回 callback 本身。
`useCallback(fn, arr)` 等於 `useMemo(()=>fun, arr)`
```
const obj1 = { id: '1', name: 'yellow' }
const obj2 = { id: '2', name: 'kimi', age: 18 }
const memoizedValue = useCallback(()=> Object.assign(obj1, obj2),[obj1, obj2])
// 使用
<div>{memoizedValue().age}</div>
```
Sign in with Wallet
Connect another wallet