高階組件

高階組件（HOC）是一個(gè)接受組件作為參數(shù)并返回一個(gè)新組件的函數(shù)，如果多個(gè)組件有相同的邏輯，將這些邏輯用函數(shù)封裝，使它們能跨組件共用，這種用法稱為高階組件。下面的代碼演示什么是高階組件：

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

上述 WithPrintLog 是高階組件，它不改變 InnerComponent 在界面上的顯示，而是等 InnerComponent 裝載之后在控制臺(tái)打印'我被裝載了'。

總體而言，高階組件可以被分為兩大類。

• 增強(qiáng)型：給組件增加額外的功能，比如前面舉例的 WithPrintLog。
• 注入型：給組件注入額外的 props，比如 Redux 的 connect。

接下來，結(jié)合 TypeScript 分別介紹增強(qiáng)型和注入型高階組件。

增強(qiáng)型高級(jí)組件

增強(qiáng)型高階組件還是以 WithPrintLog 為例，只是在前面的基礎(chǔ)上增加 loading 效果，代碼如下：

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)}/>)
        }
    }
}

React.ComponentType<P> 是 React.ComponentClass<P> | React.FunctionComponent<P> 的別稱，因此 WithPrintLog 的參數(shù)只能是類組件或函數(shù)組件。分析上述代碼中的類型注解，類型參數(shù) P 注解 InnerComponent 的 props。P & Props 注解返回值的 props，所以使用返回值時(shí)，除了傳 InnerComponent 所需的 props 還要傳 loading 字段。

注入型高階組件

注入型高階組件比增加強(qiáng)高階組件更常見，類型定義也更復(fù)雜，下面定義的 WithSubmitLog 便是一個(gè)注入型高階組件，代碼如下：

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) => { /**todo*/ }
        render() {
            const props = ({
                ...this.props,
                submitLog: this.submitLog
            }) as P
            return <InnerComponent {...props}/>
        }
    }
}

<P extends InjectedProps>(InnerComponent: React.ComponentType<P>)使用了泛型約束，它約束類型參數(shù)P必須包含 InjectedProps 接口中的字段，所以InnerComponent 組件的 props 中必須存在 submitLog 字段。Omit<P, keyof InjectedProps>表示從類型P中剝除 InjectedProps 接口中的字段，所以使用 WithSubmitLog 返回的組件時(shí)，不必傳 submitLog 字段。

高階組件 VS Render Props

高階組件和 Render Props 都是提高代碼復(fù)用的有效手段，高階組件屬于靜態(tài)組合，Render Props 屬于動(dòng)態(tài)組合。下面使用 Render Props 去改造上面的注入型高階組件 WithSubmitLog，代碼如下：

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

與前面的 WithSubmitLog 相比，SubmitLogFromRender 簡單得多，一眼就能看出它能接受那些屬性，但是要明白高階組件返回的組件能接收哪些屬性就沒那么容易，另外由于 SubmitLogFromRender 組件的 render 屬性只是一個(gè)函數(shù)，所以它的值能來自第三方庫，CDN，甚至可以在程序運(yùn)行時(shí)根據(jù)不同的情況動(dòng)態(tài)加載不同的函數(shù)。

總結(jié)

高階組件能實(shí)現(xiàn)的效果 Render Props 都能實(shí)現(xiàn)，但反過來，Render Props 能實(shí)現(xiàn)的效果高階組件不一定能實(shí)現(xiàn)，這源于 Render Props 是動(dòng)態(tài)組合，而高階組件是靜態(tài)組合。在日常開發(fā)中，我的最大感受是，分析高階組件能接受的屬性比分析運(yùn)用 Render Props 技術(shù)組件的難度大得多。

以上就是React 高階組件與Render Props優(yōu)缺點(diǎn)詳解的詳細(xì)內(nèi)容，更多關(guān)于React 高階組件 Render Props的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論