React高阶组件的封装和使用

什么是高阶组件？本质上是一个纯函数，所以高阶组件也叫高阶函数；因为高阶组件可以修饰我们普通的UI组件，所以高阶组件也叫做容器组件

高阶组件有什么用？是一种代码逻辑复用的技巧，是一种设计模式(React开发经验)

高阶组件的基本特点：它接收一个UI组件作为参数，经过一层‘修饰’，返回一个新组件

// 高阶组件的语法
function page(WrappedComponent) {
    // 定义一个新的组件
    class NewComponent extends PureComponent {
        render() {
            return (
                // Fargment解决单一根节点的问题，还不会改变代码结够，相当于空，简写 <> 
                
                    
                    我是公共部分
                
            )
        }
    }
    return NewComponent
}


// 定义一个普通类组件
class TestHoc extends PureComponent {
    constructor(props) {
        super(props)
    }
 render() {
        return (
            

                
Hello World
            
        )
    }
}

// 使用高阶组件
// 接收一个普通组件，返回一个修饰后的组件
export default page(TestHoc)

// 类组件支持修饰器语法

箭头函数封装一个高阶组件

const page2 = C => {
    return class extends PureComponent {
        render() {
            return 
        }
    }
}

export default page2(TestHoc)

// 或者这样：
// const page3 = C => (
//     props => (
//         <>
//             
//             我是公共部分
//         
//     )
// )


// 最简写法：推荐使用
// const page4 = C => props => (
//     <>
//         
//         我是公共底部
//     
// )

进阶写法：

// 进阶写法
const Com = age1 => age2 => C => props => (
   <>
      
        我是公共底部
    
 )

// 等同于
function Com(agr1) {
    return function (arg2) {
        // 返回的是高阶组件
        return function (C) {
            return props => (
                <>
                    
                    我是公共底部
                
            )
        }
    }
}

函数式组件一步到位：

// 最简写法：推荐使用
const page5 = C => props => (
    <>
        
        我是公共底部
    
)

export default page5(
    props => (
        

            
高阶组件
        
    )
)

=== 小需求 ===   假设高阶组件传了一个参数role，当role='admin'时，显示添加员工按钮，不为admin时则不显示

const page5 = C => props => (
    <>
        
        我是公共底部
    
)

export default page5(
    props => (
        

            
高阶组件
             {props.role === 'admin' && 添加员工}
        
    )
)