高阶组件
增强组件的功能
本身是一个函数
参数是一个组件,返回值也是一个组件
传入一个组件返回一个组件
非侵入 不需要组件内部状态
侵入 需要组件内部状态
高阶函数
增强函数的功能
传入一个函数返回一个函数
Vuex,redux 跨组件通讯
Vuex事件系统
同步
mutatinon
commit
异步
action
dispatch
VueX,redux(store)=>组件=>action=>Vuex
Ant design UI库/组件库
高阶组件
接受一个组件,返回一个新的组件
非侵入式 ...this.props
侵入式 super
super当成方法 指向this指针
super当成对象 指向父类
继承
函数继承 闭包=块级作用域
prototype
类的继承
extends
非侵入式
import React from 'react'
// 非侵入式组件
export default (WrapCompoennt)=>{
return class extends React.Component {
render() {
return (
<div>
<div style={{background:'skyblue',padding:'10px',display:'flex'}}>
<p>请下载淘票票</p>
<a href="https://h5.m.taopiaopiao.com/app/moviemain/pages/index/index.html?from=outer">下载</a>
</div>
<WrapCompoennt {...this.props}/>
</div>
)
}
}
}
侵入式
import React from 'react'
import Loading from '../common/Loading'
// 侵入式组件
export default (WrapCompoennt)=>{
return class extends WrapCompoennt{
render() {
if(this.state.showLoading){
return <Loading></Loading>
}else{
return super.render();
}
}
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?