高階元件(Higher Order Component,HOC)並不是React提供的某種API,而是使用React的一種模式,用於增強現有元件的功能。高階應用有三個： React.memo() connect() withRouter()
1.React.memo() 給函式式元件提升效能
涉及到純元件時使用較多。PureComponent 要依靠class才能使用。而React.memo()可以和functional component一起使用。用法就是，直接把函式直接放到React.memo()裡面就行了 PureComponent 用法如：

export default class One extends PureComponent {

}
 

React.memo()可接受2個引數，第一個引數為純函式的元件，第二個引數用於對比props控制是否重新整理，與shouldComponentUpdate()功能類似
2.connect() 用來連線action，reducer，
返回一個函式，函式引數接收UI元件，返回容器元件（在react-redux會用到）
用法：

connect(mapStateToProps,mapDispatchToProps)(ui元件)

    容器元件內部幫你做了 store.subscribe() 的方法訂閱
​    狀態變化 ==> 容器元件監聽狀態改變了 ==> 通過屬性的方式傳給UI元件

​    把`store.getState()`的狀態轉化為展示元件的`props`使用
 

3.withRouter() 可將元件變成偽路由元件。
當路由元件中有一個功能，在其他路由頁面也會被用到，我們就單獨把這個方法提取出來封裝成一個元件，但是直接這樣做的話會報錯，因為他上面沒有路由相關的api。withRouter()的作用就是高階元件訪問history物件的屬性和最近的match當路由渲染時，withRouter會將已經更新的match，location和history屬性傳遞給被包裹的元件。
用法：先引入 import {WithRouter} from "react-router-dom"

@withRouter
class BackHome extends Component {

    back = ()=>{
        //通過程式設計式導航方式返回首頁
        this.props.history.push("/home")
    }

    render() {
        return (
            <div>
                <button onClick={this.back}>返回home</button>
            </div>
        )
    }
}
export default BackHome