rn中使用装饰器

装饰器函数

装饰器中执行的顺序为从内到外，先执行视图组件的构造函数 ，在从内到外执行装饰器中的构造函数。

如果@asd（‘’）是一个方法，那么需要闭包多嵌套一层函数

function asd(params) {
    console.log(params);
    return function DDDD(wrapper) {
        return class Cp extends wrapper {
            constructor(props) {
                super(props);
                console.log(222)
                this.state = {
                    str: '111111111111',
                    ...this.state,
                };
            }

            add = () => {
            };
        };
    };
}

function ccc(wrap) {
    return class Cp extends wrap {
        constructor(props) {
            super(props);
            console.log(11,this)
            this.state = {
                str: '22222222',
                ...this.state,
            };
        }
        delete = () => {
        };
    };

}

export {
    asd, ccc
};

创建视图

import React, { Component} from 'react';
import {
    View,
    TextInput,
} from 'react-native';
import { asd,ccc} from "./bbb"

@ccc
@asd('rrrr')
class AAAA extends Component {
    constructor(props) {
        super(props);
        console.log(33)
        this.state = {
            cccc: '3333333',
        };
    }

    componentDidMount() {
        console.log(this)
    }

    qwe=()=>{
        console.log(1111)
    }

    render() {
        return <View>
            <TextInput
                style={{backgroundColor:'red'}}
                onChangeText={(e)=>{
                    this.add()
                    this.qwe()
                    this.delete()
                }}
            />
        </View>;
    }
}

export default AAAA;