最近开始学习react了,之前也接触了react,但是没有系统的去学习,也没有思考react里面每个api的设计,也没有比较react和vue的异同,今天学习了react的高阶函数,下面就我自己的理解做一下记录。
我对高阶函数的理解
刚开始看这个概念的时候,翻翻文档,好长好长,丝毫不想往下阅读,但是无奈还要学,于是硬着头皮往下读把,把文档上的例子跑一遍,开始慢慢发现有点意思了。
先定义好我们要使用的组件,这里我定义了一个CommenList组件,这个组件的作用就是接受一个值,并把这个值遍历做一下渲染,在这个组件中,不对数据做操作,可以理解为纯函数
//定义一个组件,这个组件接受一个Array类型的属性,不对数据做任何处理,只是单纯的渲染这个数据
class CommenList extends Component{
constructor(props){
super(props)
}
render(){
const {comments} = this.props;
return (
<div>
{comments.map(comen=>(
<p key={comen.id}><span>{comen.id}</span> .{comen.content}</p>
))}
</div>
)
}
}
定义高阶组件的方法
//定义一个函数,这个函数接受一个组件作为参数,然后又返回一个组件,只是返回的时候对这个组件增加了一些属性
const myHoc = Comp=>props=>{
//这里的props就是下面在render函数里面调用myHoc方法时候传入的属性值
let conm = gloable.getData(props.id)
return <Comp {...gloable} />
}
//换成es5 写法
function myHoc(Comp){
retutn function(props){
return Comp
}
}
使用高阶组件
export default class TestHoc extends Component {
let Test = myHoc(CommenList)
render() {
return (
<div>
<Test id='1'/>
</div>
)
}
}
总结
高阶组件就是一个工厂函数,要给当前传入的组件进行统一的数据处理,传入的组件相当于是一个纯函数,要在高阶组件函数中做数据处理,然后把处理好的数据放在传入组件的属性中,这样的设计符合了编程中的单一职责模式,也就是传入的组件只负责一件事,如果需要有其他的事件处理,那么就在另一个函数中加工。
在项目中的使用,感觉可以把很多有公共功能的地方抽出来,使用高阶组件去完成。
刚开始学习react,如有理解错误的地方,希望看到的各位指正。