react native支持ES7中的修饰器语法@

在使用AntDesign进行Web端开发的时候，经常需要做的事情就是防止用户做重复点击的操作，为此，我专门写了基于定时器的防抖操作（一个函数在指定时间内只执行一次）

// 定时器
let timeout;

@Form.create({
    onValuesChange({ dispatch }, changedValues, allValues) {
        // 表单项变化时请求数据
        // eslint-disable-next-line
        // 表单查询
        // 定时监听，避免出错
        // 判断是否有待发起的请求，有的话，就重置
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        // 请求数据
        const fake = () => {
            const params = proSearchConfig(allValues);
            dispatch({
                type: 'project/listProject',
                payload: {
                    ...params,
                },
            });
        };
        // 控制请求时间间隔
        timeout = setTimeout(fake, 500);
    },
})

像上面的操作，我们就限制了再表单变化的时候，0.5秒内只执行一次。

上面只是Web端的一个操作，首先我们可以发现，这里使用的是一个@Form的操作，在最开始的时候，我们是这么使用ant的表单的：

Form.create({ name: 'normal_login' })(NormalLoginForm);

后面发现可以使用到ES7的装饰器，于是就换成了上面的写法了

那么，这个ES7的装饰器应该怎么配置呢？

1.安装依赖

yarn add @babel/plugin-proposal-decorators -dev

2. 配置babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        ['@babel/plugin-proposal-decorators', { 'legacy': true }],
        ['import', { libraryName: '@ant-design/react-native' }] // 与 Web 平台的区别是不需要设置 style
    ]
};

这样就完成配置了。我第一个使用的场景就是我的下拉菜单，点击按钮展开菜单，再次点击就收起菜单，为了防止用户重复点击，加上了这么一个操作

    /**
     * 说明：展开或者收起列表
     * @date 2019/3/29
     * @time 13:39
     */
    @Bind()
    @Debounce(300)
    openOrClosePanel = () => {
        // 父级传递的点击事件
        const { bannerAction } = this.props;
        if (bannerAction) {
            bannerAction();
        }

        const { isActive } = this.state;
        if (isActive) {
            console.log('收起？', isActive);
        } else {
            console.log('展开？', isActive);
        }
        // 如果我点击的，现在是活跃的，就收起来
        if (isActive) {
            this.closePanel().start(() => this.setState({
                isActive: false
            }));
        } else {
            this.setState({
                isActive: true
            }, this.openPanel);
        }
    };