首页 > 解决方案 > Mobx:破坏本地范围的可观察属性

问题描述

我只是继承了一些代码,这些代码有一些我有点担心的约定。它使用 mobx 进行状态管理(我以前从未使用过),我对我一遍又一遍地看到的东西有疑问:

之前的作者喜欢在使用它们之前将他所有的可观察状态解构为局部变量:

@observer
class FooForm extends React.Component {
    @observable
    public fooString: string;
    @observable
    public fooNum: number;
    @observable
    public error: string;

    @action public submitFoo = () => {
        let {fooString, fooNum} = this; //for brevity?

        if(!fooString.length){
           this.error = 'Foo String must be set';
           return;
        }
        if(!fooNum < 100){
           this.error = 'fooNum must be at least 100';
           this.fooNum = 100;
           return;
        }
        //...submit
    }
    // render() and such...
}

看起来他们这样做只是为了尝试缩短他们的代码(EG fooNumvs this.fooNum),但是这样做,感觉就像他们已经用可能引入错误的引用污染了本地范围,考虑到围绕可观察对象的要求。

EG:很容易意外输入fooNum = 100;,而不是this.fooNum = 100;不会触发可观察到的状态变化!

mobx common pitfalls doc确实警告不要在本地存储 observables,但这有点不同,因为它们只是在本地范围内声明。

我反应过度了吗?这实际上是 mobx 应用程序中的常见做法吗?

还是我有理由向他们提出?(就像我说的,我是 mobx 的新手,所以我不知道规范是什么)。

标签: typescriptmobxdestructuring

解决方案


推荐阅读