uni_酷奇
2022-09-11 23:30:53浏览 708
课程：React18 系统精讲
章节：hooks
讲师：阿莱克斯刘
课程内容：
一、what?
• 高阶组件（HOC）是React中一种复用组件逻辑的设计模式
• 高阶组件是，参数为组件，返回值为新组件的函数
• 组件是将props转为UI，而高阶组件是将组件转为另一个组件
• 封装复用逻辑
二、why？
a. 抽取重复代码，实现组件复用
b. 条件渲染，控制组件的渲染逻辑（渲染劫持）
c. 捕获/劫持被处理组件的生命周期
三、how？
a. hoc函数名以小写“with”开头
b. 定义一个HOC箭头函数，并导出，形参接收一个组件
c. 函数体中return一个匿名箭头函数，函数新参props接收传入组件的props
d. 箭头函数中用接收的props写复用的逻辑
e. 最后return出一个新组件，
f. 并将接收的props作为自己的state传给return的组件，作为其props
g. 使用高阶组件：
a. 在调用高阶组件的组件中，export导出，高阶组件的调用
b. 即将使用高阶组件的组件作为参数，调用高阶组件
c. 原定义的组件名不变
h. 定义高阶组件：