高階組件簡介
組件：
class Hello extends React.Component{
render(){
return <h2>hello imooc i love react&redux</h2>
}
}
組件本質其實就是一個函數。
高階組件：
function WrapperHello(Comp){
class WrapComp extends React.Component{
render(){
return(
<div>
<p>這是高階組件特有的元素</p>
<Comp {...this.props}></Comp>
</div>
)
}
}
return WrapComp
}
Hello = WrapperHello(Hello)
==================================
以上的寫法等同於
function WrapperHello(Comp){
class WrapComp extends React.Component{
render(){
return(
<div>
<p>這是高階組件特有的元素</p>
<Comp {...this.props}></Comp>
</div>
)
}
}
return WrapComp
}
@WraperHello
class Hello extends React.Component{
render(){
return <h2>hello imooc i love react&redux</h2>
}
}
//裝飾器
高階組件：給一個組件，返回另一個組件
主要有兩種功能：
1.屬性代理
包裹後加一些元素或屬性
2.反向繼承
//可以改寫生命周期，修改渲染的邏輯和流程
function WrapperHello(Comp){
class WrapComp extends Comp{
componentDidMount(){
console.log(‘高階組件新增的生命周期，加載完成‘)
}
render(){
}
}
}
高階組件簡介