什么是高阶组件
如果熟悉react的童鞋，一定或多或少听说或者使用过高阶组件（Higher Order Components）这个概念，那么什么是高阶组件？类比函数式编程的高阶函数
在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数：1.接受一个或多个函数作为输入 2. 输出一个函数
同样，React的高阶组件也是这样的原则,接收一个或者多个React组件，返回一个新的React组件
高阶组件的生成方式
高阶组件（HOC）一般来说，有以下两种生成方式
- Props Proxy： 使用代理的方式，对原组件进行修改
- Inheritance Inversion： 反向继承
Props Proxy
我们来看这样一个例子
上图的列表带普通加载是我们在业务中经常使用的东西，我们来想想，如果将其用React实现，应该如何去做
最简单的方式那就是这么实现
class List extends Component {
constructor() {
super();
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
name: `name${i}`,
date: new Date().toLocaleDateString('zh-cn')
})
}
this.state = {
sourceData: data
}
}
loadMore = () => {
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
name: `name${i}`,
date: new Date().toLocaleDateString('zh-cn')
})
}
let newSourceData = [...this.state.sourceData, ...data];
this.setState({
sourceData: [...this.state.sourceData, ...newSourceData]
})
};
render() {
return (
<div>
<ul>
{this.state.sourceData.map((itm) => {
return (
<li>
<span>{itm.name}</span>
<span style={{marginLeft: '100px'}}>{itm.date}</span>
</li>
)
})}
</ul>
<button onClick={this.loadMore}>加载更多</button>
</div>
);
}
}
这样就简单的实现了一个带button的List组件，但是，仔细想想，如果又有一个列表组件看看，这个组件还是有不少地方可以优化提取，比如未来又出现一个组件（比如照片墙），这个组件也带有按钮用于加载更多，那么可能要写一遍相似的逻辑。那不是很麻烦？这里，我们可以用高阶组件来抽取这一段相似的逻辑，我们首先用 props代理来试试
/*ppHOC.js*/
function ppHOC(WrapComponent, initSourceData = []) {
return class PP extends Component {
constructor() {
super();
this.state = {
sourceData: initSourceData
}
}
loadMore = () => {
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
name: `name${i}`,
date: new Date().toLocaleDateString('zh-cn')
})
}
let newSourceData = [...this.state.sourceData, ...data];
this.setState({
sourceData: [...this.state.sourceData, ...newSourceData]
})
};
render() {
return <div>
<WrapComponent {...this.props} sourceData={this.state.sourceData}/>
<button onClick={this.loadMore}>加载更多</button>
</div>;
}
}
}
/*List.js*/
class List extends Component {
constructor() {
super();
}
render() {
return (
<ul>
{this.props.sourceData.map((itm) => {
return (
<li>
<span>{itm.name}</span>
<span style={{marginLeft: '100px'}}>{itm.date}</span>
</li>
)
})}
</ul>
);
}
}
普通用法用法：
/*List.js*/
import React, {Component} from "react";
import pphoc from '../src/hoc/ppHOC';
class List extends Component {
constructor() {
super();
}
render() {
return (
<ul>
{this.props.sourceData.map((itm) => {
return (
<li>
<span>{itm.name}</span>
<span style={{marginLeft: '100px'}}>{itm.date}</span>
</li>
)
})}
</ul>
);
}
}
export default pphoc(List);
如果配置了装饰器，那直接这么使用即可
import React, {Component} from "react";
import pphoc from '../src/hoc/ppHOC';
@pphoc
class List extends Component {
constructor() {
super();
}
render() {
return (
<ul>
{this.props.sourceData.map((itm) => {
return (
<li>
<span>{itm.name}</span>
<span style={{marginLeft: '100px'}}>{itm.date}</span>
</li>
)
})}
</ul>
);
}
}
export default List;
这样就用Proxy实现了一个简单的高阶组件，当然，这里面的实现方式其实都可以在List.js中实现，本文只是强调，高阶组件本质的目的是对业务进行抽象，提取公共部分的逻辑，如果有一个另外的组件也是通过loadMore来控制新数据的渲染和展示，那么直接使用这个高阶组件装饰一下即可。同时，仔细观察一下ppHOC的render方法，发现本质上我们是对原组件的props进行了代理，因此该HOC的生成方式曾作为props proxy
我们来想想，props proxy生成高阶组件，还可以完成什么功能呢？
- 包装组件，给原组件增加各种dom结构或者ReactElement
- 拿到原组件的ref
Inheritance Inversion
我们来看看另外一种高阶组件如何实现该业务逻辑,
import React, {Component} from "react";
function iiHOC(WrapComponent) {
return class IIHOC extends WrapComponent {
constructor() {
super();
this.state = {
sourceData: []
};
}
loadMore = () => {
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
name: `name${i}`,
date: new Date().toLocaleDateString('zh-cn')
})
}
let newSourceData = [...this.state.sourceData, ...data];
this.setState({
sourceData: [...this.state.sourceData, ...newSourceData]
})
};
render() {
const element = super.render();
return (<div>
{element}
<button onClick={this.loadMore}>加载更多</button>
</div>);
}
}
}
export default iiHOC;
因为使用了反向代理的方式实现，因此，不能直接代理props了，因此，List.js render方法需要通过state来改变渲染节点
@iihoc
class List extends Component {
constructor() {
super();
}
render() {
return (
<ul>
{this.state.sourceData.map((itm) => {
return (
<li key={idx}>
<span>{itm.name}</span>
<span style={{marginLeft: '100px'}}>{itm.date}</span>
</li>
)
})}
</ul>
);
}
}
export default List;
使用方法依旧，可以通过装饰器以及函数执行使用
那么 使用反向继承实现的高阶组件能做些什么呢？
- 渲染劫持（Render Highjacking）
- 操作 state
通过渲染劫持，你可以
- 操作原组件render输出的任意ReactElement,包括添加，修改，删除以及对props进行处理
- 像pphoc一样，包裹原有元素
区别
通过这两个例子，最直观明显的区别是IIHOC模式并不能改变props，因为其主要实现方式是继承实现，而不是通过代理，但是，继承带来的优点即时拥有了原组件的所有生命周期，在此基础上可以自定义修改，同时，还可以针对原组件的render方法进行劫持，渲染出需要的组件以及DOM。
使用高阶组件遇到的问题
静态方法丢失
我们给List类中添加这样的静态方法
class List extends Component{
//...
static getName = () => {
return 'List';
};
//...
}
ppHOC(List).getName(); //error getName is undefined
解决这个问题最简单的方法就是将组件原有的静态方法拷贝到新的组件，拿ppHOC举例
import React, {Component} from "react";
function ppHOC(WrapComponent) {
return class PP extends Component {
constructor() {
super();
}
static getName = WrapComponent.getName;
loadMore = () => {
let data = [];
for (let i = 0; i < 10; i++) {
data.push({
name: `name${i}`,
date: new Date().toLocaleDateString('zh-cn')
})
}
let newSourceData = [...this.state.sourceData, ...data];
this.setState({
sourceData: [...this.state.sourceData, ...newSourceData]
})
};
render() {
return <div>
<WrapComponent {...this.props} sourceData={this.state.sourceData}/>
<button onClick={this.loadMore}>加载更多</button>
</div>;
}
}
}
export default ppHOC;
这样做，就需要你清楚的知道都有哪些静态方法需要拷贝的。或者你也可是使用hoist-non-react-statics来帮你自动处理，它会自动拷贝所有非React的静态方法
总结
本文只是简单介绍到了React HOC以及其2种实现方式，其本质也是设计模式中代理模式&&装饰器模式的一种很好的使用，在日常开发中，如果遇到了大量通用逻辑一致的组件时，不妨往高阶组件想想，是否能提取公共逻辑进行复用，这样的代码维护性，使用性也会更高，大量开源库React-Redux中connect、React-Router也证明了高阶组件存在的价值与意义
