react里的高階組件

高階組件(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