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