高阶组件#

1.高阶组件定义#

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

2.函数模拟高阶函数#

1
function banana() {
2
    let name = 'wengkaimin';
3
    console.log(`${name} likes banana`);
4
}
5
function apple(myName) {
6
    let name = 'wengkaimin';
7
    console.log(`${name} likes apple`);
8
}
9
banana();
10
apple();

以上有冗余的代码，在平时开发过程中可能会有一大堆写一个中间函数来处理这个相同的代码

1
function banana(myName) {
2
    console.log(`${myName} likes banana`);
3
}
4
function apple(myName) {
5
    console.log(`${myName} likes apple`)
6
}
7
function getFruit(fun) {
8
    let myFruit = (() => {
9
        let myName = 'wengkaimin';
10
        fun(myName);
11
    })
12
    return myFruit
13
}
14
banana = getFruit(banana);
15
apple = getFruit(apple);
16
banana();
17
apple();

getFruit函数就叫做一个高阶函数，他帮我们处理了前面两个函数的相同模块，帮忙把myName自动的加入了所有继承getFruit的函数，此场景在react中的高阶组件有广泛的应用。

3.react中的高阶组件#

改成react高阶组件形式

1
import React, { Component } from 'react'
2

3
class Banana extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            username: ''
8
        }
9
    }
10

11
    componentWillMount() {
12
        let username = 'wengkaimin'
13
        this.setState({
14
            username: username
15
        })
16
    }
17

18
    render() {
19
        return (
20
            <div> {this.state.username} likes banana</div>
21
        )
22
    }
23
}
24

25
export default Banana;

1
import React, { Component } from 'react'
2

3
class Apple extends Component {
4
    constructor(props) {
5
        super(props);
6
        this.state = {
7
            username: ''
8
        }
9
    }
10

11
    componentWillMount() {
12
        let username = 'wengkaimin'
13
        this.setState({
14
            username: username
15
        })
16
    }
17

18
    render() {
19
        return (
20
            <div> {this.state.username} likes apple</div>
21
        )
22
    }
23
}
24

25
export default Apple;

从两段代码来看有很多重复的组件代码。按照高阶函数的思想我们中间封装一个高阶组件来处理这些东西。

1
import React, {Component} from 'react'
2

3
export default (fruitComponent) => {
4
    class Myfruit extends Component {
5
        constructor() {
6
            super();
7
            this.state = {
8
                username: ''
9
            }
10
        }
11

12
        componentWillMount() {
13
            let username = 'wengkaimin'
14
            this.setState({
15
                username: username
16
            })
17
        }
18

19
        render() {
20
            return <fruitComponent username={this.state.username}/>
21
        }
22
    }
23

24
    return Myfruit
25
}

简化apple和banana组件

1
import React, {Component} from 'react';
2
import Myfruit from 'Myfruit';
3

4
class Banana extends Component {
5

6
    render() {
7
        return (
8
            <div> {this.props.username} likes banana</div>
9
        )
10
    }
11
}
12

13
Banana = Myfruit(Banana);
14

15
export default Banana;

同理apple高阶组件把username通过props把他传给目标组件。