
NodeNote,react相关库源码浅析, react ts3 项目
HOOK学习路径
第一阶段:基础
- 首先通过HOOK简介了解HOOK
- HOOK是在函数组件中使用的,和类组件的关系
- HOOK出现的动机,解决如下几个方面:
在组件之间复用状态逻辑很难,复杂组件变得难以理解,难以理解的 class
- 深刻理解Hook 规则
- 熟悉useState的用法
- 熟悉useEffect的用法,体会是如何解决
复杂组件变得难以理解:Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据) - 熟悉自定义HOOK的用法,体会如何解决``:
在组件之间复用状态逻辑很难:Hook 使你在无需修改组件结构的情况下复用状态逻辑。
第二阶段:进阶
- 通过Hook API 索引
- 回顾useState以及useEffect
- 熟悉useContext与useReducer的配合使用
- 熟悉作为优化手段的useCallback以及useMemo的用法与使用场景
- 熟悉useRef与useLayoutEffect的用法与使用场景
- 了解useImperativeHandle与useDebugValue的用法
- 细读Hooks FAQ
第三阶段:高阶
- 精读《React Hooks 最佳实践》普通函数放到函数组件外面
- 精读《Epitath 源码 - renderProps 新用法》
- 精读《React Hooks》
- 🍊🍊🍊重要 精读《Function Component 入门》useEffect用到的函数尽量放到这个hook里面
- 精读《useEffect 完全指南》如果useEffect用到的函数一定要放到外面那么用useCallback包裹,之前的文章就提到没有依赖的函数放到组件外面
- 精读《怎么用 React Hooks 造轮子》:只需要细读
封装原有库部分 - HOOK获取数据
第四阶段:实战