React 高级课程之高阶组件

2020-02-17 本文已影响0人北疆小兵

高阶函数基本概念

函数可以作为参数传递

例如下面例子，setTimeout方法有2个参数，第一个参数是一个函数

setTimeout(() => {
            console.log('helo');
  }, 100);

函数可以作为返回值输出

下面foo函数的返回值是一个函数，就可以认为foo是以函数作为返回值的高阶函数

function  foo(x) {
        return function() {
            return x;
        }
    }

高阶组件基本概念

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

A.js

function A(WappedComponent){
    return class A extends Component {
        render() {
            return (
                <View>
                    <Text style={{color:'red'}}>提示</Text>
                    <WappedComponent />
                </View>
            )
        }
    }    
}
export default A;


B.js
class B extends Component {
    render() {
        return (
            <Text style={{color:'red'}}>这是 B 组件</Text>
         )
    }
}
export default A(B);

C.js
class C extends Component {
    render() {
        return (
            <Text style={{color:'red'}}>这是 C 组件</Text>
         )
    }
}
export default A(C);

A组件是一个函数，通过接收一个参数（这个参数是一个组件），返回一个新的组件

高阶组件实现

编写高阶组件

function d(WrapComponent){
    return class D extends Component {
        render() {
            return (
                <View>
                    <Text> textInComponent </Text>
                    <WrapComponent />
                </View>
            )
        }
    }    
}

export default d;

使用高阶组件

1.higherOrderComponent(WrappedComponent) 普通函数模式
2.@ higherOrderComponent 装饰器模式

如果是使用第2种装饰器方式，需要做一些配置

在package.json 中配置 eject

image.png

在组件B上面用一个@ d 符号就可以将B作为参数传递给高级组件d了


@d
class B extends Component {
    render() {
        return (
            <Text style={{color:'red'}}>这是 B 组件</Text>
         )
    }
}

export default B;