本文基于官方文檔+Q&A+自己短期實踐和理解，計劃后面查缺補漏
hooks意義：
為了去掉class狂鞋，提供了一些代替contructor、生命周期等原有設(shè)計理念的替代方案
- 去掉class：避免了 創(chuàng)建+維護instance（mv to “memory cells” concept）澳眷、eventhandler的this bind等多余操作
- function component： 更符合js語言習(xí)慣蒜焊，避免了 組件樹instance深層嵌套、hoc照棋、props復(fù)雜度资溃，更小的組件樹更少操作
功能：
- useState：定義單獨（推薦）/復(fù)雜 state
- useEffect: 每次render后（相當于componentDidMount & componentDidUpdate）
- useContext: 跨級傳遞context
- useMemo: cache variable/expression
- useCallback: cache function
- useReducer: 實現(xiàn)redux
- useRef: 相當于class component的 this
- useLayoutEffect: 同步的useEffect
- useImperativeHandle: 綁定到component的instance，提供可暴露的func // 官方不推薦
- useDebugValue: 給 // 目測雞肋
- Custom hook: difine your own hook with name ‘use’ prefix
- React.memo()：shouldComponentUpdate同場景
// dependencies: 把所有依賴到的variable/function都列出來 - 不要遺漏烈炭，不要試圖挑戰(zhàn)eslint
- 如有特殊情況溶锭，考慮用其他hooks配合實現(xiàn)
API:
進階：
- useState:
- Lazy init： [a, setA]=useState( initFn: ()=>{} )
- 實時更新：setA( updateFn: ()=>{} )
- 依賴之前state時，建議用這種方式避坑
- 高級：擺脫依賴：useEffect(()=>{ a = a+1; setA(a) }, [a]) -> useEffect(()=>{ setA( a=> a+1 ) }, []) 更復(fù)雜（如：setA( a => a+b ) // b為另一state）符隙，用useReducer
- useEffect:
- Return cleanUpFunc: ()=>{} // 會在下次useEffect之前調(diào)用
- 配合ref趴捅，限制更新的timing
- 觸發(fā)時機：dom重繪之后 // 如需在重繪之前，用useLayoutEffect
- useMemo vs useCallback:
- useMemo(()=>a+b, [a,b]) // cache的是a+b
- useCallback(()=>a+b, [a,b]) // cache的是()=>a+b
- useMemo：cache childComponent 避免無謂render
- useRef：近似與class Component中的 this===instance霹疫，re-render不會被清理拱绑，可做組件內(nèi)持久化（如判斷useEffect更新timing：只在update時）
- useReducer：更復(fù)雜（如：setA( a => a+b ) // b為另一state），用useReducer
- useContext：multiple context不方便處理建議拆分丽蝎，如{dispatch, state1}
- state的depend 會影響dispatch的cache（dispatch是不需要變動的）猎拨，處理起來比較麻煩
- 自行處理
- One of Dependencies(todolist) change，will not change object -> object will not be create totally every change time;
- context變動詳情
一些坑：
- hooks不能用在loop里屠阻，可以對item各自處理
- hooks不能多層嵌套红省，可以分開定義
