1.基本概念
高阶组件是React 中一个很重要且较复杂的概念，高阶组件在很多第三方库（如Redux）中都被经常使用，即使你开发的是普通的业务项目，用好高阶组件也能显著提高你的代码质量。高阶组件的定义是类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。类似的，高阶组件接收React组件作为参数，并且返回一个新的React组件。高阶组件本质上也是一个函数，并不是一个组件，这一点一定要注意
高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用。
2. 应用场景
假设我有一个组件，需要从LocalStorage中获取数据，然后渲染出来。于是我们可以这样写组件代码：
import React, { Component } from 'react'
export default function HOC(WrappedComponent，key) { //key接收到的参数
return class extends Component {
componentWillMount() {
let data = localStorage.getItem(key);
this.setState({data});
}
render() {
// 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}
@HOC //装饰器引入无参数方式
class MyComponent2 extends Component {
render() {
return <div>{this.props.data}</div>
}
}
export default HOC(MyComponent2) //不传参数
export default HOC(MyComponent2,'name') //参数传递
3.进阶用法
有其他参数时的高级用法
import React, { Component } from 'react'
export default (key) => (WrapperComponent)=>{ //key接收到的参数
return class extends Component {
componentWillMount() {
let data = localStorage.getItem(key);
this.setState({data});
}
render() {
// 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}
@HOC //装饰器引入无参数方式
@HOC('name') //传递参数
class MyComponent2 extends Component {
render() {
return <div>{this.props.data}</div>
}
}
export default HOC()(MyComponent2) //不传参数
export default HOC('name')(MyComponent2) //参数传递
react-redux中的connect就是这种用法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
4.高阶组件与父组件
高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。
- 如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；
- 如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。
