mobx 反应动作绑定

Question

对于那些使用mobx+编写应用程序的人react，我想知道在带有&的 react 组件中使用事件处理程序时是否有更好的方法来处理上下文问题（例如，在商店中this.返回）。undefinedmobxonClickinjectobserver

我一直在写处理程序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 的核心更相关，因此我建议您阅读这篇 MDN 文章以获取有关行为的更多信息this。

希望，这有帮助！