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