react学习-高阶组件

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;

效果图