R16 hooks总结

本文基于官方文档+Q&A+自己短期实践和理解，计划后面查缺补漏

hooks意义：

为了去掉class，提供了一些代替contructor、生命周期等原有设计理念的替代方案

去掉class：避免了创建+维护instance（mv to “memory cells” concept）、eventhandler的this bind等多余操作
function component：更符合js语言习惯，避免了组件树instance深层嵌套、hoc、props复杂度，更小的组件树更少操作

useState：定义单独（推荐）/复杂 state
useEffect: 每次render后（相当于componentDidMount & componentDidUpdate）
useContext: 跨级传递context
useMemo: cache variable/expression
useCallback: cache function
useReducer: 实现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都列出来
不要遗漏，不要试图挑战eslint
如有特殊情况，考虑用其他hooks配合实现

useState:
- Lazy init： [a, setA]=useState( initFn: ()=>{} )
- 实时更新：setA( updateFn: ()=>{} )
  - 依赖之前state时，建议用这种方式避坑
  - 高级：摆脱依赖：useEffect(()=>{ a = a+1; setA(a) }, [a]) -> useEffect(()=>{ setA( a=> a+1 ) }, []) 更复杂（如：setA( a => a+b ) // b为另一state），用useReducer
useEffect:
- Return cleanUpFunc: ()=>{} // 会在下次useEffect之前调用
- 配合ref，限制更新的timing
- 触发时机：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不会被清理，可做组件内持久化（如判断useEffect更新timing：只在update时）
useReducer：更复杂（如：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变动详情

最后编辑于：2019.10.11 11:30:35