1、什么是高阶函数？
高阶函数有两个重要的特征：
a.函数可以作为参数被传递。例如常见的时间函数：
setTimeout(() => {
console.log('aaaa');
},2000)
b.函数可以作为返回值输出:
show(a){
return function(){
return a;
}
}
2、高阶函数的常见应用
a.在时间函数中的应用
b.在ajax中的应用
$.get('api/getTime',() => {
console.log('查询成功');
})
c.在数组中的应用
如常用的some()、every()、filter()、map()、forEach()函数等
3、什么是高阶组件
高阶组件HOC（High Order Component）基本概念
const EnhancedComponent = higherOrderComponent(WrappedComponent);
高阶组件就是接受一个组件作为参数并返回一个新组件的函数。
高阶组件是一个以参数为组件、返回值为新组件的函数，并不是真正意义上的组件。
4、高阶组件与普通组件的区别：
普通组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。
5、如何理解高阶组件？下面举个栗子
首先，通过普通函数来理解什么是高阶组件：
有两个方法，一个welcome，一个goodbye。两个函数先从localStorage读取了username，然后对username做了一些处理，代码如下：
function welcome() {
let username = localStorage.getItem('username');
console.log('welcome ' + username);
}
function goodbey() {
let username = localStorage.getItem('username');
console.log('goodbey ' + username);
}
welcome();
goodbey();
我们发现两个函数有一句代码是一样的，这叫冗余唉。不好不好~
我们需要写一个中间函数，读取username,他来负责把username传递给两个函数，通过它来减少冗余的代码。代码如下：
function welcome(username) {
console.log('welcome ' + username);
}
function goodbey(username) {
console.log('goodbey ' + username);
}
function wrapWithUsername(wrappedFunc) {
let newFunc = () => {
let username = localStorage.getItem('username');
wrappedFunc(username);
};
return newFunc;
}
welcome = wrapWithUsername(welcome);
goodbey = wrapWithUsername(goodbey);
welcome();
goodbey();
这里的wrapWithUsername函数就是一个“高阶函数”。
他做了什么？他帮我们处理了username，传递给目标函数。我们调用最终的函数welcome的时候，根本不用关心username是怎么来的。
我们增加个用户study函数。
function study(username){
console.log(username+' study');
}
study = wrapWithUsername(study);
study();
这里你是不是理解了为什么说wrapWithUsername是高阶函数？我们只需要知道，用wrapWithUsername包装我们的study函数后，study函数第一个参数是username。
我们写平时写代码的时候，不用关心wrapWithUsername内部是如何实现的。
把上面的函数统统改成react组件。
welcome函数转为react组件：
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>welcome {this.state.username}</div>
)
}
}
export default Welcome;
goodbey函数转为react组件:
import React, {Component} from 'react'
class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>goodbye {this.state.username}</div>
)
}
}
export default Goodbye;
通过对比这两个组件的代码我们不难发现：两个组件大部分代码都是重复的。
按照上一节wrapWithUsername函数的思路，我们来写一个高阶组件(高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件)，代码如下：
import React, {Component} from 'react'
export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return <WrappedComponent username={this.state.username}/>
}
}
return NewComponent
}
这样我们就能简化Welcome组件和Goodbye组件:
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
<div>welcome {this.props.username}</div>
)
}
}
class Goodbye extends Component {
render() {
return (
<div>goodbye {this.props.username}</div>
)
}
}
Welcome = wrapWithUsername(Welcome);
Goodbye = wrapWithUsername(Goodbye);
通过以上代码，不难发现：高阶组件就是把username通过props传递给目标组件了。目标组件只管从props里面拿来用就好了。
高阶组件就讲完了。你再返回去理解下定义，是不是豁然开朗?
6、高阶组件的使用场景
多个组件都需要某个相同的功能，使用高阶组件可以减少重复实现。
常见的使用场景
如react-redux中的connect
export default connect(mapStateToProps,mapDispatchToProps)(header)
7、高阶组件的应用
应用场景1：代理方式的高阶组件
返回新的组件类直接继承自react.component类，新组件扮演的角色传入组件的一个代理，在新组件的render函数中，将被包裹组件渲染出来，除了高阶组件自己要做的工作，其余功能全部转手给了被包裹组件。
应用场景2：将普通组件使用函数包裹
采用继承关联作为参数的组件和返回的组件，加入传入的组件参数是
WrappedComponent,那么返回的组件就直接继承自WrappedComponent
网友评论