手记

【学习打卡】第11天 高仿AntD从零到一打造组件库

课程名称: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) 的劣势:

  1. 添加页面结构
  2. 难以理解
  3. 需要研究hoc,才能知道被包裹的组件的props代表什么含义

自定义Hook解决以上问题


高阶组件hoc(不如hook灵活)

函数,接受一个组件作为参数并返回一个组件

useState(null) ,不传范性会默认为null类型

0人推荐
随时随地看视频
慕课网APP