高阶组件简介

标签：func   ops   com   mooc   简介   return   one   end   splay   

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

}
}

}

高阶组件简介

标签：func   ops   com   mooc   简介   return   one   end   splay   

原文地址：https://www.cnblogs.com/eret9616/p/9281276.html