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