1.高阶组件对props的劫持

about.jsx
import React, { PureComponent } from 'react'
import Total from "../Total"
class About extends PureComponent {
    render() {
        return (
           <h1>About:{`昵称:${this.props.nickname}等级:${this.props.level}区域:${this.props.region}`}</h1>
        )
    }
}
export default Total(About)

home.jsx
import React, {PureComponent  } from 'react'
import Total from "../Total"
 class Home extends PureComponent {
    render() {
            return (
                <h1>Home:{`昵称:${this.props.nickname}等级:${this.props.level}区域:${this.props.region}`}</h1>
             )
    }
}
export default Total(Home)

const total=(Newcomponent)=>{
    return props=>{
        return  <Newcomponent {...props} region="中国"/>
    }
}
export default total

2.鉴权操作

相当于一层拦截器，例如判断当前组件是否是登录状态

//AredyLogin.jsx
import React, { Component } from 'react'
import NewLogin from "./NewLogin"
 class AredyLogin extends Component {
    render() {
        return (
            <div>
             这是个已经登录状态的组件
            </div>
        )
    }
}
export default  NewLogin(AredyLogin)

//外层函数组件判断是否处于登录状态
import StartLogin from "./StartLogin"
const isLogin=(Login)=>{
  return props=>{
      if(props.login){
          return <Login {...props}/>
      }
      else{
          return <StartLogin/>
      }
  }
}
 export default isLogin

//没有登录状态的组件
//StartLogin.jsx
import React, { Component } from 'react'
export default class StartLogin extends Component {
    render() {
        return (
            <div>
                没有登录吧，就跳转到这个组件
            </div>
        )
    }
}

app.js
function App() {
  return (
    <div className="App">
     我是app组件
     <AredyLogin login={true}></AredyLogin>
    </div>
  );
}
export default App;