React 高阶组件

2022-08-16 22:02:29 阅读：123 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9