复用方式
HOC，高阶组件，high order component，组件套组件，父组件里执行部分逻辑渲染子组件
render props，没有逻辑部分 JSX 作为 props 传入另外一个组件来复用
function 组件本来没有 state，变成 fiber 后依旧没有
加入了 memorizedState 属性存储数据
组件里通过 API 来使用这些数据，这些 API 就是 hooks api
因为使用 fiber 节点上的数据，就把 api 命名改为 useXxx
每个 hooks api 都要有自己存放数据的地方，一种是map，一种是数组
map 要指定 key
数组保证顺序不能变，所以不能出现在 if 等逻辑块中，只能在顶层
hooks api 分类
数据类
useState
在 fiber.memoriedState 的对应元素存放数据
最简单的存储形式
useMemo
在 fiber.memoriedState 的对应元素存放数据
值是缓存的函数计算的结果
state 变换后重新计算值
相当于 vue 的 getter
useCallback
在 fiber.memoriedState 的对应元素存放数据
值是函数，state 变换后重新执行
是 useMemo 在值为函数的场景下的简化 api
useCallback(fn, [a, b]) 相当于 useMemo(() => fn, [a, b])
useReducer
在 fiber.memoriedState 的对应元素存放数据
值为 reducer 返回的结果
通过 action 来触发值的变更
useRef
在 fiber.memoriedState 的对应元素存放数据
值为 { current: 具体值 } 的形式
因为对象不变，只是 current 属性变了，所以不会修改
可以放一些不变的数据
逻辑类
useEffect
异步执行函数，state 变换后会再次执行，当组件销毁时会调用返回的清理函数
useLayoutEffect
渲染完成后同步执行函数，可拿到 DOM
ref 转发专用
dom 元素只能通过 ref 转发
在父组件创建 ref，子组件把元素传过去，传过去之前做一些修改，就可以用 useImperativeHandle 来改
