React 高阶组件

  • React 高阶组件已关闭评论
  • 46 次浏览
  • A+
所属分类:Web前端
摘要

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


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