React高阶组件和JS高阶函数的区别

63 阅读1分钟

英文简称: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

官网(zh-hans.reactjs.org/docs/higher…