高阶组件（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

 

标签：return,入参,React,props,组件,高阶,page
来源： https://www.cnblogs.com/wang622/p/16590930.html