以下為各個 branch 名稱和內容的大綱
- noHookNoRender
- 沒有搭配 Hook 無法渲染畫面
- useStateButNoUpdateFunction
- 使用 useState，不使用更新函式
- useStateButNumberAddOne
- 使用 setTimeOut 並不使用更新函式
- useStateSetState
- 使用更新函式
- useStateUseUpdateFunction
- 使用 setTimeOut 並使用更新函式
- useStateNoLazyInitial
- 沒有 lazyInitial
- useStateUseLazyInitializer
- 使用 LazyInitializer
- useEffectPrint
- 使用 useEffect 僅在畫面載入時印
- useEffectPrintManyTimes
- 使用 useEffect 當畫面任何重新渲染時候印
- useEffectIntervalCleanUp
- 使用 useEffect 並且 cleanUp
- useEffectCountdownExample
- 使用 useEffect 用倒數計時器範例
- propsDrilling
- 造成 props drilling
- useContextProvideConsumer
- 使用 context 加入 provide 和 consumer 解決過度傳遞
- useContextSimplifyConsumer
- 使用 useContext 簡化 consumer
- useContextNestContext
- 巢狀 context 只有內層會被顯示
- useContextRerenderProblem
- useContext 造成多次 rerender
- useReducerInOneComponent
- 使用 useReducer 在同一個 component
- useReducerInComponent
- 使用 useReducer 將 reducer 拆出
- useReducerAddPayload
- 使用 useReducer 添加 payload
- separateReducerAndInitialState
- 使用 useReducer 拆分出 initialState
- useReducerDefineActiontypeActionCreater
- 使用 useReducer 定義 actionType 和 actionCreater
- memoChildComponentRender
- 未使用 React.memo
- memoWrapChildComponent
- 使用 React.memo 包裹住 component
- memoButPropsIsObject
- 使用 React.memo 但是 prop 是物件
- memoAssignCompare
- 使用指定的 prop 作為 memo 重新渲染的依據
- useRefInitHello
- 使用 useRef 代入字串"hello"
- useRefOnClickAndFocusInput
- 使用 useRef 聚焦 input 輸入框
- useRefOnClickButNotRerender
- 使用 useRef 添加 input 以至於資料與狀態不一
- ForwardRefMyInput
- 使用 useRef 搭配 forwardRef 使父層可存取子層 component 的 DOM