React 高阶组件

高阶组件（HOC）

高阶组件（Heigher Order Component）也被称之为高阶函数，容器组件，高阶组件是类组件编程中的一种重要代码逻辑复用技巧。

高阶组件的语法

接收一个React组件作为入参，经过修饰，最后返回一个新的React组件，所以这个入参的React组件被称之为“UI组件”；这个高阶组件被称之为“容器组件”。注意：在高阶组件中无论怎么对UI组件进行修改都不能修改。所以高阶组件是一种纯函数。

什么是纯函数

入参不能被修改，并且相同入参返回的是相同结果的函数，都叫做纯函数。

解决高阶组件导致属性丢失

封装自定义高阶组件时，如果props属性丢失，可以使用属性穿透（属性继承）解决

如何使用高阶组件

组件和 高阶组件的区别

高阶组件的使用场景

    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
标签 , , , , , ,

发表回复