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配合实现

API:

官方API文档

进阶：

• 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变动详情

一些坑：

• hooks不能用在loop里，可以对item各自处理
• hooks不能多层嵌套，可以分开定义