高阶组件

• 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件
• 高阶组件的作用其实就是为了组件之间的代码复用

日志组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Hello extends Component {
    render() {
        return <div>hello</div>
    }
}
function Logger(OldComponent: React.ComponentClass) {
    return class LoggerComponent extends Component {
        start;
        componentWillMount() {
            this.start = Date.now();
        }
        componentDidMount() {
            console.log(`组件渲染完成一共花了${Date.now() - this.start}ms`);
        }
        render() {
            return <OldComponent></OldComponent>
        }
    }
}
const LoggerHello = Logger(Hello);
ReactDOM.render(
    <LoggerHello />,
    document.getElementById('root')
)

多层高阶组件

• 从localStorage中加载
• 从ajax中加载

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


interface Props {
    value: string
}
function fromLocal(AjaxComponent: React.FC<Props> | React.ComponentClass<Props>) {
    return class FromLocal extends Component<Props> {
        render() {
            return <AjaxComponent value={localStorage.getItem(this.props.value)} />
        }
    }
}
function fromAjax(ShowComponent: React.FC<Props> | React.ComponentClass<Props>) {
    return class FromAjax extends Component<Props> {
        state = {
            value: ''
        }
        componentDidMount() {
            fetch('/user.json').then(response => response.json()).then(res => {
                this.setState({
                    value: res[this.props.value]
                })
            })
        }
        render() {
            return <ShowComponent value={this.state.value} />
        }
    }
}
const ShowComponent: React.FC<Props> = (props: Props): React.ReactElement => {
    return <p>{props.value}</p>
}
let FromLocalAjaxcomponent = fromLocal(fromAjax(ShowComponent));
ReactDOM.render(
    <FromLocalAjaxcomponent value="username" />,
    document.getElementById('root')
)