pdl 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
123 文章
0 评论
1275 浏览
0 当前访客
ღゝ◡╹)ノ❤️

React 高阶组件(Higher Order Component,简称:HOC)

什么是高阶组件?

高阶组件只是一个包裹了另一个组件的 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 {
    
}


标题:React 高阶组件(Higher Order Component,简称:HOC)
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/08/30/1573740604148.html

评论