07-react 高阶组件，及组件补充

高阶组件

什么是高阶组件

 应用一：props增强

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    render() {
        return (
            <div>
               <NewHeader name="kebe" age="18"/>
               <NewFooter name="jams"age="28"/>
            </div>
        )
    }
}


class Header extends PureComponent{
    render() {
        const { name,age,height} = this.props
        return (
            <div>
                <h2>我是header:姓名{name}年龄：{age}身高：{height}</h2>
            </div>
        )
    }
}
class Footer extends PureComponent{
    render() {
        const { name,age,height} = this.props
        return (
            <div>
                <h2>我是Footer:姓名{name}年龄：{age}身高：{height}</h2>
            </div>
        )
    }
}
/* 如果想要 增加一个身高，但不修改header组件  使用高阶组件*/
function createNewComponemt(OldComponent,newprops){
    return props =>{return <OldComponent {...props}{...newprops}/>}
}

const NewHeader = createNewComponemt(Header,{height:1.88})
const NewFooter = createNewComponemt(Footer,{height:1.88})

 增强二  利用高阶组件来共享Context

import React, { PureComponent ,createContext} from 'react'

const Appcontext = createContext({
    name:"默认",
    age:-1
})



class Header extends PureComponent{
    render() {
        return <h2>header:{`姓名:${this.props.name}年龄：${this.props.age}`}</h2>
    }
}
class Footer extends PureComponent{
    render() {
        return <h2>footer:{`姓名:${this.props.name}年龄：${this.props.age}`}</h2>
    }
}

function withUser(OldComponent){
    return props =>{
        return (
            <Appcontext.Consumer>
                {
                    value=>{
                        return <OldComponent {...props} {...value}></OldComponent>
                    }
                }
            </Appcontext.Consumer>
        )
    }
}

const UserHeader = withUser(Header)
const UserFooter = withUser(Footer)


export default class App extends PureComponent {

    render() {
        return (
            <div>
                <Appcontext.Provider value={{name:"kebe",age:"12"}}>
                    <UserHeader/>
                    <UserFooter/>
                </Appcontext.Provider>
               
            </div>
        )
    }
}

应用二：渲染判断鉴权

 应用三：生命周期劫持

 ref的转发

 portals的使用

fragment的使用 

 类似vue的template

 StrictMode严格模式