英文简称:HOC英文high order components 高阶组件
一、还记得高阶函数的定义
JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数
1.1例如数组Array的 map
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(x=>x*x); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
1.2当然也可以自定义高阶函数
function add(x, y, f) {
return f(x) + f(y);
}
var x = add(-5, 6, Math.abs); // 11
console.log(x);
二、高阶组件是(参数为组件),返回值为(新组件)的函数
HOC 在 React 的第三方库中很常见,例如 Redux 的 connect
例如在使用class组件开发时,redux和组件的连接(当然,现在建议使用hooks开发)
const AreaContainer = connect(
mapState,
mapDispatch
)(Area)
export default AreaContainer