介紹
高階組件（HOC）是 React 中用于復用組件邏輯的一種高級技巧级零。HOC 自身不是 React API 的一部分断医，它是一種基于 React 的組合特性而形成的設計模式。
React 官網(wǎng)對高階組件的定義描述得很清楚奏纪。高階組件不是 React 所獨有的鉴嗤，它只是一種設計模式，簡單來說就是為了復用代碼而對組件進行封裝序调。
要搞清楚高階組件醉锅，先得了解下高階函數(shù)，這樣一類比下就很容易理解了发绢。
- 高階函數(shù)：函數(shù)的參數(shù)或者返回值為函數(shù)硬耍，這個函數(shù)就是高階函數(shù)。
- 高階組件：函數(shù)的參數(shù)為組件边酒，返回一個組件经柴，這個函數(shù)就是高階組件。
高階函數(shù)
高階函數(shù)（Higher Order Function）墩朦，按照定義坯认，是至少滿足下列一個條件的函數(shù)：
- 函數(shù)作為參數(shù)傳入
- 返回值為一個函數(shù)
參數(shù)為函數(shù)的例子：
let pow = function square(x) {
return x * x;
};
let array = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = array.map(pow); //直接傳入一個函數(shù)
let newArr = array.map((item) => {return item * item}); //傳入一個箭頭函數(shù)
//返回的一個函數(shù)
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]
返回值為函數(shù)的例子：
/* 函數(shù)柯里化 */
let add = function(x) {
return function(y) {
return function(z){
return x+y+z;
};
};
};
高階組件
高階組件（Higher Order Component），是滿足下列所有個條件的函數(shù)：
- 組件作為參數(shù)傳入
- 返回值為一個組件
包裹組件
// A/index.js
import React from 'react';
import './index.css';
// 定義一個函數(shù)
// 傳入一個組件作為參數(shù)
function A(WrappedComponent) {
// 返回一個組件
return class A extends React.Component {
constructor (props) {
super(props);
this.state = {};
}
render () {
return (
<div className="a-container">
<div className="header">
<div className="title">提示</div>
<div className="close">X</div>
</div>
<div>
<!-- 在這里使用一下 -->
<WrappedComponent />
</div>
</div>
)
}
}
}
export default A
內部組件
// B/index.js
import React from 'react';
import A from '../A/index.js';
import './index.css';
class B extends React.Component {
render() {
return (
<div className="wrap">
<img src="https://xxx.xxx.png" alt="" />
</div>
);
}
}
<!--調用A()方法去包裹我們的B組件氓涣。-->
export default A(B);
