pengdongliang 的个人博客

什么是高阶组件？

高阶组件只是一个包裹了另一个组件的 React 组件。

注1：确切的说高阶组件是一种 React 组件模式，它是一个 JavaScript 函数，将组件作为参数并返回一个新组件。

分为两类

1. Props Proxy(属性代理)
2. Inheritance Inversion(反向继承)

HOC有什么用?

1. 代码重用，逻辑和引导抽象
2. 渲染劫持（Render Highjacking）
3. state(状态)抽象和操作
4. props(道具)操作

代码如下:

import React from "react"

/**
 * HOC
 * 属性代理
 * @param {*} WrappedComponent 
 */
export function propsHoc(WrappedComponent) {
    return class PropsHOC extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                name: "jack",
            }
        }

        componentDidMount() {
            console.log(new Date().format("yyyy-MM-dd HH:mm:ss"));
            console.log(this.props);
            console.log(this.state);
        }


        render() {

            return (
                <div>
                    <WrappedComponent {...this.props} {...{ name: this.state.name }} />
                </div>
            )
        }

    }
}

/**
 * HOC
 * 反向继承
 * @param {*} WrappedComponent 
 */
export function inversionHoc(WrappedComponent) {
    return class InversionHoc extends WrappedComponent {
        componentDidMount() {
            this.setState({ name: "rose" }, () => console.log(this.state))
        }

        render() {
            console.log(this.state)
            return super.render()
        }
    }
}

/**
 * 使用方法 1.注解  2.propsHoc(Index), inversionHoc(Index)
 */
@inversionHoc
@propsHoc
class Index extends React.Component {
    
}