react 高阶函数

HOC(Higher Order Components)就是一个函数，传给它一个组件，它返回一个新的组件。

高阶组件：就相当于手机壳，通过包装组件，增强组件功能。

实现步骤：

• 首先创建一个函数
• 指定函数参数，参数应该以大写字母开头
• 在函数内部创建一个类组件，提供复用的状态逻辑代码并返回
• 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
• 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

使用function完成高阶组件定义

// import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
// Fragment jsx不会解析为html，但是它能当作 顶级元素  相当于vue中的template
// react提供一种简写 <></>

/* // 高阶组件是一个函数且 参数 是一个首字母要大写的组件
function withCmp(Cmp) {
  // 需要一个类组件且此组件要有返回
  return class HocCmp extends Component {
    // 渲染
    render() {
      // let title = this.props.title+'----...'
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
  // 需要返回，返回是一个组件
  // return HocCmp
}

export default withCmp */

// 高阶组件是一个函数 箭头函数也可以定义一个高阶组件
export default Cmp => {
  // 匿名类
  return class extends Component {
    // 渲染
    render() {
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
}

在App.jsx中使用一个高阶组件

import React, { Component } from 'react'
// Home组件增强一些功能，使用此组件就自带头和尾，但是有时候又可没有
// 对于Home组件使用高阶组件进行包裹
import Home from './pages/Home'


// 导入高阶组件 函数
 import hocCmp from './hoc/withCmp'

 let Myhome = hocCmp(Home)

export default class App extends Component {
  state = {
    title: '我是一个标题',
    desc: '描述'
  }

  render() {
    return (
      <div>
        {/* 高阶组件 */}
         <Myhome state={this.state} /> 
      </div>
    )
  }

}

Home文件

import React, { Component } from 'react';
import withCmp from '../hoc/withCmp'
// import fn from '../hoc/fn'
// 它就是一个函数 装饰器(它是类配套) decorator
@withCmp

// 高阶组件传参数
// @fn('aaa','bbb')
class Home extends Component {
  render() {
    return (
      <div>
        {this.props.title}
        我是一个组件
        <hr />
        {this.props.children}
      </div>
    );
  }
}


export default Home;