1.简介
react高阶组件是一个函数，接收一个组件作为参数，返回一个新的组件，可以用来进行组件封装，将一些公共逻辑提取到高阶组件内部。
2.基本实现
以下案例为利用高阶组件来增强props

import React, { Component } from "react";// 基础组件People
export class People extends Component {render() {return (<div><h1>People</h1><p>姓名：{this.props.name}</p><p>年龄：{this.props.age}</p><p>爱好：{this.props.hobby}</p></div>);}
}// 基础组件Boy
export class Boy extends Component {render() {return (<div><h1>Boy</h1><p>姓名：{this.props.name}</p><p>年龄：{this.props.age}</p><p>爱好：{this.props.hobby}</p></div>);}
}// 需求：给每个组件传多个props
// 用高阶组件实现
// 高阶组件
const PropsComponents = (Component) => {// 接受一个组件参数，将部分公共逻辑在这里处理，返回一个新的函数式组件const newComponent = (props) => {return <Component {...props} hobby="读书高阶组件"></Component>;};return newComponent;
};// 传入基础组件生成新的组件
const PropsPeople = PropsComponents(People);
const PropsBoy = PropsComponents(Boy);export class AddProps extends Component {render() {return (<div><People name="张三" age="16" hobby="读书"></People><Boy name="李四" age="18" hobby="读书"></Boy>{/* 高阶组件实现，hobby内容相同就封装在了高阶组件内部*/}<PropsPeople name="张三" age="16" /><PropsBoy name="李四" age="18" /></div>);}
}
export default AddProps;

效果图