一、普通组件和高阶组件的区别
一个复杂的应用由多个页面组成，一个页面由多个组件组成，组件的作用主要是界面的分治和可复用。
但在React组件的构建过程中，常常有这样的场景，有一类功能需要被不同的组件公用，此时，就涉及抽象的话题，这个时候就需要用到高阶组件。
二、高阶组件介绍
高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。
具体来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。在我们项目中使用react-redux框架的时候，有一个connect的概念，这里的connect其实就是一个高阶组件。
1.实现高阶组件的方法
1.1属性代理，高阶组件通过被包裹的React组件来操作props；
1.2反向继承，高阶组件继承于被包裹的React组件。
2.属性代理
页面引用部分：
import React, { Component } from 'react';
import FormWrapper from './FormWrapper';
class Index extends Component{
render() {
return(
<div>Usual</div>
)
}
}
export default FormWrapper(Index);
HOC部分：
import React, { Component } from 'react';
const FormWrapper = WrappedComponent =>{
return class extends Component{
render() {
return(<WrappedComponent {...this.props} />)
}
}
}
export default FormWrapper;
属性代理是我们react中常见高阶组件的实现方法，这里最重要部分是render方法中返回了传入 WrappedComponent的React组件。这样我们就可以通过高阶组件来传递props。这种方法即为属性代理。
当使用属性代理构建高阶组件时，生命周期的过程为：
didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount
3.反向继承
跟属性代理的方式不同的是，反向继承采用通过去继承WrappedComponent，本来是一种嵌套的关系，结果反向继承返回的组件却继承了WrappedComponent，这看起来是一种反转的关系。通过继承WrappedComponent，除了一些静态方法，包括生命周期，state，各种function，我们都可以得到。
const FormWrapper = (WrappedComponent)=>{
class extends WrappedComponent {
render(){
return super.render();
}
}
}
这种方法与属性代理不太一样。它通过继承WrappedComponent来实现，方法可以通过super来顺序调用。因为依赖于继承机制。HOC的调用顺序和队列是一样的。
didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)
4.装饰器模式
高阶组件可以看做是装饰器模式(Decorator Pattern)在React的实现。即允许向一个现有的对象添加新的功能，同时又不改变其结构，属于包装模式(Wrapper Pattern)的一种。
上面的例子还可改写为：
import React, { Component } from 'react';
import FormWrapper from './FormWrapper';
@FormWrapper；
...
三、应用场景
假设现有两个页面UI几乎一样，功能几乎相同，仅仅几个操作不太一样，却写了两个耦合很多的页面级组件。在维护它的时候，由于耦合性过多，经常在页面一改完，还要去改页面二。这时在加新功能的时候，可以写一个高阶组件，往HOC里添加方法。这样新代码就不会再出现耦合，旧的逻辑并不会改变。
网友评论