课程名称:2022升级 React18+TS高仿AntD从零到一打造组件库
课程章节: 第3章 神奇的 React 配合 typescript,完美输出
主讲老师:张轩
课程内容:
今天学习的内容包括:
3-10 自定义 Hook - 重构 MouseTracker
3-11 自定义 Hook 第二部分 - HOC的劣势
3-12 自定义 hook 第三部分 - 正确的方式完成 URLLoader
课程收获:
自定义hook
将组建逻辑提取道可重用的函数中
把组建的状态和状态处理独立出来,不考虑视图层的页面
必须以use开头
在两个组件中使用相同的hook,不会重用里面的state
HOC是个函数,形式是接收组件为参数,返回新的组件。
使用HOC参数不容易理解,逻辑比较混乱
HOC(Higher order component) 的劣势:
- 添加页面结构
- 难以理解
- 需要研究hoc,才能知道被包裹的组件的props代表什么含义
自定义Hook解决以上问题
高阶组件hoc(不如hook灵活)
函数,接受一个组件作为参数并返回一个组件
useState(null) ,不传范性会默认为null类型