react高阶组件

什么是高阶组件
高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。

const NewComponent = higherOrderComponent(OldComponent)

• 高阶组件并不是一个什么组件，而是一个函数，它接受一个组件作为参数，返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件，这样就方便在组件中传值，如下是一个简单的高阶组件示例：

import React, { Component } from 'react'
export default (OldComponent) => {
  class NewComponent extends Component {
    render () {
      return <OldComponent />
    }
  }
  return NewComponent
}

• 这个高阶组件好像什么都没有做，只是简单地传入一个组件，然后新建一个NewComponent组件类来渲染传入的组件。要想体现出高阶组件的功能，我们先给它出入一些数据：

import React, { Component } from 'react'

export default (OldComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { 
        data: null,
      }
    }
    componentWillMount () {
      const data = sessionStorage.getItem(name);
      this.setState({ data });
    }
    render () {
      return <OlComponent data={this.state.data} />
    }
  }
  return NewComponent
}

• 现在 NewComponent 会根据第二个参数 name 在挂载阶段从 SessionStorage 加载数据，并且修改state.data，而渲染的时候将 state.data 通过 props.data 传给 OldComponent。
• 这样给高阶组件赋予了一定的功能，但是要如何使用这个高阶组件呢？
  假设这个文件在component/sessionLoadData.js，我们在其他地方使用这个高阶组件：

import sessionLoadData from './component/sessionLoadData.js'

class InputWithUserName extends Component {
  render () {
    return <div>用户名：<input name="username" value={this.props.data} /></div>
  }
}
InputWithUserName = sessionLoadData(InputWithUserName, 'username');
export default InputWithUserName

总结

• 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。
• 高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过 props 传递信息。
• 高阶组件有助于提高我们代码的灵活性，逻辑的复用性。