为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
React

课程: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. 定义高阶组件:
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消