一、高阶组件
①接收一个组件返回一个增强性的组件
高阶组件其实是一个函数，这个函数接收一个参数，这个参数是一个组件，返回值是一个增强性的组件
component/list/header.js //①这是新建一个组件
import React,{Component} from 'react'
class Header extends Component{
render(){
return(
<div>
header
</div>
)
}
}
export default Header
component/list/list.js
import React,{Component} from 'react'
import Header from "./header" //② 在原有的组件中引入这个组件
let Hoc =(Com)=>{ //③写一个函数，这个函数中带一个参数是一个组件 ，相当于一个将要被替换掉的模板
class Text extends Component{
render(){
return(
<div>
<p>这是一个高阶组件</p>
<Com/>
</div>
)
}
}
return Text
}
let Hi =Hoc(Header) //④ 再写一个函数，将模板Hoc中的参数写成想要的组件名
class List extends Component{
render(){
return(
<div>
<Hi/> //⑤ 将这个组件渲染到页面上
</div>
)
}
}
export default List
②属性代理：实现组件的复用性 //就是我写一个组件，我想在什么组件中使用就将这个组件引入到那个组件中去，利用高阶组件的概念进行渲染
header.js //这就相当于一个组件模板，需要的时候引入就可以，数据可以在高阶组件中进行修改
import React,{Component} from 'react'
class Header extends Component{
render(){
let {imgs}= this.props
return(
<div className="swiper-container">
<div className="swiper-wrapper">
{
imgs.map((item,index)=>{
return <div className="swiper-slide" key={index}>
<img src={item}/>
</div>
})
}
</div>
</div>
)
}
}
export default Header
list.js
import React,{Component} from 'react'
import Header from "./header"
let Hoc =(Com)=>{
class Text extends Component{
constructor(){ //当不同的高阶组件需要不同的数据时可以在这里修改
super();
this.state={
arr:[
"https://www.swiper.com.cn/demo/slow-transition/img/picture-1.jpg",
"https://www.swiper.com.cn/demo/slow-transition/img/picture-2.jpg",
"https://www.swiper.com.cn/demo/slow-transition/img/picture-3.jpg"
]
}
}
render(){
let {arr} = this.state
return(
<div>
<Com imgs={arr}/>
</div>
)
}
}
return Text
}
let Hi =Hoc(Header)
class List extends Component{
render(){
return(
<div>
<Hi/>
</div>
)
}
}
export default List
③ 反向集成 ：渲染劫持
根据条件来渲染不同的组件或数据
list.js
import React,{Component} from 'react'
import Header from "./header"
let Hoc =(params)=>(Com)=>{
class Text extends Component{
constructor(){
super();
this.state={
arr:[
"https://www.swiper.com.cn/demo/slow-transition/img/picture-1.jpg",
"https://www.swiper.com.cn/demo/slow-transition/img/picture-2.jpg",
"https://www.swiper.com.cn/demo/slow-transition/img/picture-3.jpg"
]
}
}
render(){
let {arr} = this.state
return(
params?<Com imgs={arr}/>:<p>请登录</p> //这里是一个三目运算，根据条件的不同来渲染不同的组件
)
}
}
return Text
}
let Hi =Hoc(false)(Header) //这里的第一个参数是params中的值
class List extends Component{
render(){
return(
<div>
<Hi/>
</div>
)
}
}
export default List