React学习记录第一节之高阶函数HOC

最近开始学习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,如有理解错误的地方，希望看到的各位指正。