【九月打卡】第六天 高阶组件

课程：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. 定义高阶组件：