HOC高阶组件

HOC入参出参都是（函数），组件

HOC（High Order Component） 是 react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个
React API 。 它只是一种设计模式，类似于装饰器模式。
具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。 从结果论来说，HOC相当于 Vue 中的
mixins(混合) 。其实 React 之前的策略也是采用 mixins ，但是后来 facebook 意识到 mixins
产生的问题要比带来的价值大，所以移除了 mixins。

如何实现高阶组件？

import React from 'react'

// 入参是组件，返回值也是组件
function hocPlace(Component){
    return class hocPlace extends React.Component {
        render(){
            return(
                <div>
                <h1>高阶组件(函数)</h1>
                <Component></Component>
                </div>
            )
        }
    }
}

export default hocPlace

A.js文件：

import React from 'react'
import hocPlace from './HocPlace';

class A extends React.Component{
    render(){
        return(
            <div>
                <h2>我是A组件</h2>
            </div>
        )
    }

}

export default hocPlace(A)

并将A组件抛出之后，在具体页面上引入并使用A组件就可以实现了

高阶组件如何实现登陆拦截

1.编写HOCLogin文件：

import React from 'react'
import {Redirect} from 'react-router-dom'

function hocLogin(Component){
    return class HocLogin extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isLogin:true
            }
        }
        render(){
            let {isLogin}=this.state
            return(
                <div>
                   {
                       isLogin ? <Component /> : <Redirect from='/*' to='/login' />
                   }
                </div>
            )
        }
    }
}

export default hocLogin

2.在需要引入的组件中导入该组件，建立连接：

关键语句为：

import hocLogin from '../hoc/HocLogin.js'
@hocLogin
class YZLayout extends React.Component{
......
				}

此时在高阶组件中便可以用<components></components>（简写为<components />）来代替这个被引入的组件了。

完整的示例代码如下：

import React from 'react'
import './style.scss'
import Side from './Side.js'
import Header from './Header.js'
import Content from './Content.js'

// 用高阶组件实现登陆拦截
import hocLogin from '../hoc/HocLogin.js'

@hocLogin
class YZLayout extends React.Component{
    render(){
        return(
            <div className='yz_layout'>
                <div className='aside'>
                <Side></Side>
                </div>
                <div className='header'>
                <Header></Header>
                </div>
                <div className='content'>
                <div className='content_wrap'>
                <Content></Content>
                </div>
                </div>
            </div>
        )
    }
}

export default YZLayout

3.最后在App.js中进行路由编写

伪代码如下：

import {YZLayout} from '@/components'
import Login from '@/routes/login/login'
    		.......
   render(){
   return(
 <HashRouter >
   <Provider store={store}>
      <div className="app">
         <YZLayout />
          <Route exact path='/login' component={Login} />
     </div>
   </Provider>
 </HashRouter>
   )
   }