高阶组件HOC
高阶组件HOC
高阶函数:一个函数内部返回一个新的函数,内部采用闭包的写法。
var add = x => {
return y => {
return x+y
}
}
//调用add
add(3)(1)
高阶组件:(HOC) Higher-Order-Component
高阶组件本质上就是一个函数,内部可以接收一个组件,然后返回新的组件;简单来说就是组件复用
例如: React.memo() connect()
封装一个具有版权信息的高阶组件WithCopy,内部接收一个组件,最终返回一个新的组件。
import React, { Component } from 'react'
//定义一个高阶组件WithCopy 本质上是一个函数,接受一个组件,返回一个全新的组件。
//connect()(UIComponent) 只需要通过this.props.xxx可以获取到传递来的属性了
//类组件 函数式组件(无状态组件)
//表单元素而言 受控、非受控
//HOC高阶组件 :redux中connect() React.memeo(functional component)
const WithCopy = Comp=>{
return class WithCopyComp extends Component{
render(){
return (
<div>
<Comp name={this.props.name}/>
版权信息©
</div>
)
}
}
}
export default WithCopy
创建一个About.js调用WithCopy组件
import React, { Component } from 'react'
import WithCopy from './WithCopy'
class About extends Component {
render() {
return (
<div>
关于-{this.props.name}
</div>
)
}
}
export default WithCopy(About)
请用今天的努力,让明天没有遗憾。