React高阶组件入门

React高阶组件入门

React高阶组件也差不多快要退出主流舞台了，我是因为初学，所以记录一下自己的理解

简介

有点像Vue的Mixin（对象混入），封装公共模块。不过React并不提倡这种做法，所以引入了一种新的概念叫高阶组件（HOC）：一个函数，能够接受一个组件并返回一个新的组件。

命题

一个模块需要显示用户个人基础信息，一个模块需要显示用户个人基础信息加等级

一般做法

ShowPersonInfo.tsx(显示用户个人信息)

import React from 'react';

interface PersonInfoState {
  name: string,
  age: string,
  sex: string,
  level?: string
}

const ShowPersonInfo: React.FC<any> = (props: PersonInfoState) => {
  return (
    <div>
      <p>姓名：{props.name}</p>
      <p>性别：{props.sex}</p>
      <p>年龄：{props.age}</p>
      <p>亲爱的{props.name}，早上好！</p>
    </div>
  )
}
export default ShowPersonInfo

ShowPersonlevel.tsx(显示用户个人等级)

import React from 'react';

interface PersonInfoState {
  name: string,
  age: string,
  level: string,
  sex: string
}

const ShowPersonLevel: React.FC<any> = (props: PersonInfoState) => {
  return (
    <div>
      <p>姓名：{props.name}</p>
      <p>性别：{props.sex}</p>
      <p>年龄：{props.age}</p>
      <p>你的Vip等级为lev{props.level}，离下一级还有……天</p>
    </div>
  )
}
export default ShowPersonLevel

index.tsx

import React from 'react';

import ShowPersonInfo from './showPersonInfo';
import ShowPersonLevel from './ShowPersonLevel';

const personInfo = {
  name:'jx',
  age:'25',
  sex:'男',
  level:'12'
}

const Person: React.FC<any> = (props: any) => {
  return (
    <div style={{margin:'50px'}}>
      <p>基础信息</p>
      <ShowPersonInfo {...personInfo}></ShowPersonInfo>
      <p>基础信息加等级</p>
      <ShowPersonLevel {...personInfo}></ShowPersonLevel>
    </div>
  )
}

export default Person;

一般效果

高阶组件封装

hoc/GetBasicInfo.tsx

import React from 'react';

const GetBasicInfo = (Func: any) => {
  return (props: any) => {
    return (
      <div>
        <p><span>姓名：</span><span>{props.name}</span></p>
        <p><span>年龄：</span><span>{props.age}</span></p>
        <p><span>性别：</span><span>{props.sex}</span></p>
        <Func {...props}></Func>
      </div>
    )
  }
}

export default GetBasicInfo;

ShowPersonInfo.tsx

import React from 'react';

import GetBasicInfo from '@/hoc/getBasicInfo';

const ShowPersonInfo: React.FC<any> = (props: any) => {
  return (
    <div>
      <p>亲爱的{props.name}，早上好！</p>
    </div>
  )
}

export default GetBasicInfo(ShowPersonInfo);

ShowPersonLevel.tsx

import React from 'react';
import GetBasicInfo from '@/hoc/getBasicInfo';

const ShowPersonLevel: React.FC<any> = (props: any) => {
  return (
    <div>
      <p>你的Vip等级为lev{props.level}，离下一级还有……天</p>
    </div>
  )
}
export default GetBasicInfo(ShowPersonLevel);

封装后效果

总结

可以看到两种效果都是一致的，同时其他两个模块的代码量大大减少了，后续开发中我们一般就只需要关注GetBasicInfo.tsx这个组件。当然实际项目中肯定不会这么简单。

不过现在因为hooks的出现，现在也不提倡使用高阶组件了，因为会出现多层嵌套，对后续维护不友好。