昨天的bmi計算器範例用到了一個未曾見過的新面孔-useReducer

究竟 useReducer 是何方神聖呢
現在來進行說明

useReducer

跟其他 react hook 一樣，要用的話就要從 react import

import {useReducer} from 'react';

useReducer 作用與接收的參數

一言以敝之，基本上就是 useState 的加強版（被毆XD

如果更新的state 得 依賴先前的 state 或 state 本身有複雜的邏輯跟結構則可以用 useReducer 來處理

用法像這樣

const [ state , dispatch ] = useReducer( reducerFn,initState,initStateFn );

做個簡圖感覺會比較好理解

[ state , dispatch ]

• 某個狀態時的 state 快照
• dispatch
  用來觸發 state 更新的 function，執行 dispatch 時傳入的 argument 就是 reducerFn 內的action
  useReducer 的 arguement 有三，分別為 (reducerFn , initState ,initStateFn)
• reducerFn
  為一個 function 接收 2個 parameter 先前狀態的 state / action(call dispatch 時傳入的 argument)
  並回傳更新後的 state (updated state)
• initState
  state 的初始值，通常在這邊會是個 object
• initStateFn
  選填，初始化 state 值的 function

回到之前用 setState 來建構計數器的部分，這次用 useReducer 達到相同效果

codesandbox在這邊

接下來要來介紹其他的快樂好朋友 useMemo / useCallback / useRef
並且了解一下他們分別的作用吧XD

參考資料

https://zh-hant.reactjs.org/docs/hooks-reference.html#usereducer
https://www.youtube.com/watch?v=kK_Wqx3RnHk