组件：
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(){
}
}
}