高階組件（HOC）

高階組件（Heigher Order Component）也被稱之為高階函式，容器組件，高階組件是類組件編程中的一種重要代碼邏輯復用技巧，

高階組件的語法

接收一個React組件作為入參，經過修飾，最后回傳一個新的React組件，所以這個入參的React組件被稱之為“UI組件”；這個高階組件被稱之為“容器組件”，注意：在高階組件中無論怎么對UI組件進行修改都不能修改，所以高階組件是一種純函式，

什么是純函式

入參不能被修改，并且相同入參回傳的是相同結果的函式，都叫做純函式，

解決高階組件導致屬性丟失

封裝自定義高階組件時，如果props屬性丟失，可以使用屬性穿透（屬性繼承）解決

如何使用高階組件

類組件可以使用Hoc(page)或者裝飾器語法@page
函陣列件只能使用Hoc(page)組件和高階組件的區別

組件和高階組件的區別

組件是將props轉換為UI
高階組件是將組件轉換另一個組件

高階組件的使用場景

在路由中withRounter()，在轉臺管理中content()，在Mobx中有inject()或者observer()
使用高階組件給頁碼添加公共的視圖結構，比如水印等，
使用高階組件可以注入全域的公共方法，比如彈窗，校驗等，
使用高階組件可以添加相同的業務功能，比如DOM功能，BON功能，訂閱功能等，
使用高階組件可以實作權限設計，

    import { PureComponent } from "react";

    //高階組件權限設計
    function studay (WrappedComponent){
        // return class extends PureComponent{
        //     render(){
        //         return(
        //             <>
        //                 <nav>導航欄</nav>
        //                 <WrappedComponent {...this.props}></WrappedComponent>
        //                 <footer>底部導航欄</footer>
        //             </>
        //         )
        //     }   
        // }
        return props =>(
            <>
                <nav>導航欄</nav>
                <WrappedComponent {...props}/>
                <footer>底部導航欄</footer>
            </>
        )
    }

    //
    const page = (arr) =>{
        console.log('權限',arr);
        //狀態管理中的角色資訊
        const roles = ['user']
        const flag = roles.some(ele=>arr.includes(ele))
        return WrappedComponent =>{
            return props =>(
                <>
                    {flag ? <WrappedComponent {...props}></WrappedComponent>: <h1>你的權限不足</h1>}
                </>
            )
        }
    }

    //封裝瀏覽器視窗標題
    const title = title =>{
        return  Men => class extends PureComponent{
            componentDidMount(){
                document.title = title || '沐沐5'
            }
            render(){
                return(
                <Men {...this.props}></Men>
                )
            }
        }
    }
    
    //只有在class上才能使用裝飾器語法
    @page(['admin',])
    @studay
    class A extends PureComponent{
        render(){
            console.log(this.props);
            return (
                <>
                    <h1>高階組件</h1>
                </>
            )
        }
    }

    export default A

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502030.html

標籤：其他

上一篇：React 背景關系

下一篇：css 隱藏元素

React 高階組件