react 高阶组件 简介

react 高阶组件

高阶组件的概念来自于高阶函数————可以接受函数作为参数/返回值的函数。

高阶组件就是可以接受组件作为参数，返回组件的函数。

用法很多，不过可读性较差。

一般会这样用：

实现判断权限，决定返回什么组件。

实现数据处理之后再传递给（要被返回的）组件。

实现装饰器模式的功能。

实现数据请求和组件的分离。

import React from 'react';
import ReactDom from 'react-dom';
function decorator (comp: React.FC<ComponentProps>) { 
// 返回组件
    return class newComp extends React.Component<ComponentProps, State>{
        state = { value: this.props.something.toUpperCase()}
        render() {
            return <comp value={this.state.value} />
        }
    }
}

const myInput = (props: ComponentProps) =>{
    return <input defaultValue={props.value} />
}
// 组件参数
newComp = decorator(myInput) 
ReactDom.render(<newComp something={'something'}/>, document.querySelector('#id'))