react的hoc

简单的讲，Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

官网的定义：

组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

react 高阶组件的两种方式: 属性代理、反向继承

a. 高阶组件的反向继承：通过操作super.render():

import React from 'react'
import {
  render
} from 'react-dom'
 
//import App from './App4'
 
class ComponentChild extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 2019
    }
  }
 
  componentDidMount() {
    console.log("child component Did Mount")
  }
  clickComponent() {
    console.log("Component click")
  }
 
  render() {
    return ( <div > {
        this.state.num
      } </div>
    )
  }
}
 
 
 
let iihoc = (WrapComponet) => class extends WrapComponet {
 
  constructor(props) {
 
      super(props)
 
      this.state = {
 
          num: 2000
 
      }
 
  }
 
  componentDidMount() {
 
      console.log('iihoc componentDidMount')
 
      this.clickComponent()
 
  }
render(){
  return (
 
    <div>
 
        <div onClick={this.clickComponent}>iiHoc 点击</div>
 
       {/* <div><WrapComponet /></div> */}//用的是父组件的state；
       <div>{super.render()}</div>//反向继承，用的是子组件的state；
    </div>
 
)
}
}
 
 
var App = iihoc(ComponentChild)
 
render( <App /> ,document.getElementById('root'))

b. 属性继承：

import React, { Component } from 'react';
 
const loading = info => Wrapcomponent => {
  return class loadings extends Component {
    render() {
      
      return (<div>
        <Wrapcomponent {...props} {...state} />
      </div>);
    }
  };
};
export default loading;

我们可以通过高阶组件来实现一个组件底部的共享版权信息添加

目录结构：

copyright.jsx

import React from 'react'
// 函数式组件内部返回一个class类型组件
const withCopyright = (InnerComponent)=>{
//注意这里的形参需要首字母大写，和普通组件一致
    return class newcom extends React.Component{
        render(){
            return(
                <>
                    <InnerComponent></InnerComponent>
                    <div>©底部共享版权信息</div>
                </>
            )
        }
    }
}
export default withCopyright
//将我们的HOC的函数式组件暴露出去

home.js

import React, { Component } from 'react'
import Copyright from './copyright'
//将hoc函数式组件引入

class home extends Component {
//定义一个类组件写入内容
    render() {
        return (
            <div>
                home页面内容
            </div>
        )
    }
}

export default Copyright(home)
//用函数式组件包裹类组件后暴露导出

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Mycomponent from './HOC/home.jsx'
//引入home

ReactDOM.render(

  <Mycomponent/>,

  document.getElementById('root')
);

参考博客：

React 中高阶组件(HOC)用法简述

react 高阶组件的两种方式: 属性代理、反向继承