高阶组件简介
Posted eret9616
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高阶组件简介相关的知识，希望对你有一定的参考价值。
组件：
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(){
}
}
}
以上是关于高阶组件简介的主要内容，如果未能解决你的问题，请参考以下文章