react学习17-React高阶组件

高阶组件

• 高阶组件 HOC（hight ordered component）
• withRouter就是高阶组件
• 高阶组件的本质其实就是一个函数，该函数参数接收一个组件，返回值依然是一个组件，返回的组件一般会比参数组件多一些props属性
• 组件代码复用的一种方式（高阶组件可以向别的组件中注入通用的props属性）

// 实现一个高阶组件
// 参数表示输入的组件
function withRouter (InputComponent) {
  // 函数的返回值也是一个组件
  return class extends React.Component {
    state = {
      PI: Math.PI,
      history: {
        push: function () { console.log('push') }
      },
      location: {abc: 123},
      match: {msg: 'hello'}
    }
    render () {
      return <InputComponent {...this.state}/>
    }
  }
}

// 高阶组件withRouter作用：向Login组件中注入一些属性
const WLogin = withRouter(Login)

// withRouter向Welcome组件中注入PI值
const WWelcome = withRouter(Welcome)