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

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

官网的定义：

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

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

const EnhancedComponent = higherOrderComponent(WrappedComponent);

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

目录结构：

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')
);

※HOC的一些问题：

• HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。
• 被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的 data prop。HOC 不需要关心数据的使用方式或原因，而被包装组件也不需要关心数据是怎么来的。
• 不要试图在 HOC 中修改组件原型（或以其他方式改变它）。
• 不要在 render 方法中使用 HOC。
• 复制静态方法。
• Refs 不会被传递。

以上问题可在官网查看解决办法，本文不再搬运
官网链接:https://react.docschina.org/docs/higher-order-components.html