Question

对于那些使用mobx + react编写应用程序的人，我想知道是否有更好的方法来处理上下文问题（例如，this.返回undefined mobx存储）在带有onClick和inject的react组件内使用observer事件处理程序时。

我一直在编写类似onClick={actionFromStore.bind(this.props.theStore)}的处理程序来解决该问题，但似乎应该有一种我不知道的更简洁的方法来执行此操作。

我不是mobx专家，任何建议将不胜感激！

此处的操作是异步提取请求

Answer 1

您可以使用@action.bound装饰器：

@action.bound
doSomething(){

    // logic

}

或使用将保留上下文的labmda函数：

@action
doSomething = ()=> {

    // logic

}

Answer 2

自2018年以来，React应用程序开发的最佳实践是将lambda函数用作类属性而不是类方法。

lambda函数作为类属性可解决上下文可能发生的所有问题。如果使用方法，则不必将方法绑定到特定的上下文。

例如，您使用某种类方法使用this：

export default class SomeClass {
    myProp = "kappa"

    myMethod() {
        console.log(this.myProp)
    }
}

在这种情况下，如果您要使用它，例如，像某些事件侦听器一样，this会意外地（实际上比预期的要多）从SomeClass实例更改为其他值。因此，如果您使用类方法，则应该像这样修改代码：

export default class SomeClass {
    constructor() {
        this.myMethod = this.myMethod.bind(this)
    }

    myProp = "kappa"

    myMethod() {
        console.log(this.myProp)
    }
}

在构造函数中，您将您的类方法绑定到SomeClass实例的上下文。

避免这种不必要的代码的最佳方法（想象一下，您有10种以上的这种类型的方法-应该绑定每种方法），只需使用lambda函数即可：

export default class SomeClass {
    myProp = "kappa"

    myMethod = () => {
        console.log(this.myProp)
    }
}

就是这样！ Lambda函数没有上下文，因此this将始终指向SomeClass实例。因此，现在您可以根据需要装饰类属性：

export default class SomeClass {
    myProp = "kappa"

    @action
    myMethod = () => {
        console.log(this.myProp)
    }
}

请注意，如果您使用的是Babel，则必须使用transform-class-properties插件。

这个问题与JavaScript的核心更为相关，因此建议您阅读this MDN article，以获取有关this行为的更多信息。

希望，这很有帮助！

Answer 3

使用Mobx 6时，装饰器变得越来越不鼓励使用，并且变得笨拙（要求makeObservable（this）在构造函数中甚至在子类中也要仔细调用）

因此，我现在发现它更干净

strtok_r

而不是

doStuff = action(() => {
    //  stuff logic
})

或

@action.bound
doStuff() { ...

这种没有装饰符的模式在旧版Mobx中也适用。

mobx反应动作绑定

3 个答案: