什么是高阶组件
高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。
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 传递信息。
- 高阶组件有助于提高我们代码的灵活性，逻辑的复用性。
