在 react 官网有高阶组件定义, 高阶在英文中为 high order, 以前在学习 JavaScript 的时候也经常听到高阶函数, 可是听起来觉得挺高大尚, 那个时候还是似懂非懂, 跟别人聊到 JS 时, 也爱掏出这名词说出几遍. 不过一段时间, 随着不断学习, 才知道高阶函数本质就是: 函数可以作为函数的参数, 返回值... 被使用, 并没有什么神秘. 那么现在是不是高阶组件也就没啥了, 就是组件可以参数和返回值传入组件.
这里可以理解为一个函数接受一个组件作为参数, 然后返回一个组件, 我们定义一个人员列表组件, 然后我们需要给组件添加新功能, 也就是当加载服务端数据时, 数据还没有加载完成时, 我们让列表页显示 "加载中", 加载完成后显示列表. 我们就可以选择对列表组件包装一层判断, 我们可以使用高阶组件来实现此功能
首先我们看第一个参数 propName 用于指定我们根据那个参数来判断列表是否加载, 如果我们 hard coding 可以写成 this.props.list.length == 0 来判断是返回 <div > 加载中 </div> 还是列表组件. 返回一个函数, 这个函数会接受参数 wrapperComponent 也就是列表组件, 这里我们传入的是列表组件, 看一看是如何使用这个 LoaderHOC 高阶函数的吧
contacts 参数我们需要判读属性, ContactList 是组件
来源: http://www.jianshu.com/p/b8fab1d6c21b