【2022.8.17】高阶组件 高阶函数

[lkzwc]

高阶组件

一个函数接受一个或者多个组件作为参数或者返回一个组件，就可以称之为高阶组件

高阶函数

一个函数接受一个或者多个函数作为参数或者返回一个函数，就可以称为高阶函数

高阶组件的两种方式

• 属性代理【操作props，抽离state,ref 访问组件】

// 装饰器的简单思路
import React, { Component } from 'react'

const MyContainer = (WrappedComponent) => {
    class extends Component {
        render() {
            return <WrappedComponent {...this.props} />
        }
    }
}

• 反向继承【继承传入的组件,渲染劫持】

const MyContainer = (WrappedComponent) => {
    return class HOC extends WrappedComponent {
        render() {
            return super.render()
        }
    }
}

存在的问题

• 静态方法的丢失
• refs不能透传
• 反向继承不能保证完整的组件间树被解析

优势

• 代码复用
• 权限控制