React 高阶组件与Render Props优缺点详解

export default function WithPrintLog(InnerComponent) {
    return class extends React.Component{
        componentDidMount() {
            console.log('我被装载了')
        }
        render() {
            return (<InnerComponent {...this.props}/>)
        }
    }
}

interface Props {
    loading?: boolean
}
export default function WithPrintLog<P extends {}>(InnerComponent: React.ComponentType<P>) {
    return class extends React.Component<P & Props, never> {
        componentDidMount() {
            console.log('我被装载了')
        }
        render() {
            const {loading, ...props} = this.props
            return (loading ? <div>loading...</div> : <InnerComponent {...(props as P)}/>)
        }
    }
}

export interface InjectedProps {
    submitLog: (data: string) => void
}
export function WithSubmitLog<P extends InjectedProps>(InnerComponent: React.ComponentType<P>) {
    return class extends React.Component<Omit<P, keyof InjectedProps >, never> {
        submitLog = (data: string) => {  }
        render() {
            const props = ({
                ...this.props,
                submitLog: this.submitLog
            }) as P
            return <InnerComponent {...props}/>
        }
    }
}

interface Props {
    render: (submitLog: (data: string) => void) => React.Reactnode;
}
class SubmitLogFromRender extends React.Component<Props , never> {
    submitLog = (data: string): void => {  }
    render(): React.ReactNode {
        return this.props.render(this.submitLog)
    }
}