react高阶组件

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 
    }
  }
}

@HOC //装饰器引入无参数方式
class MyComponent2 extends Component {  
  render() {
    return 
{this.props.data}
  }
}

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 
    }
  }
}

@HOC //装饰器引入无参数方式
@HOC('name')  //传递参数
class MyComponent2 extends Component {  
  render() {
    return 
{this.props.data}
  }
}

export default HOC()(MyComponent2) //不传参数
export default HOC('name')(MyComponent2)  //参数传递

react-redux中的connect就是这种用法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

4.高阶组件与父组件

高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。

• 如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；
• 如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。