1

我正在努力理解thisES6 类中的工作原理，这使得构建具有任何一致性的应用程序变得困难。这是我在 React 类中的困惑的一个例子：

class Class extends React.Component {

    constructor() {

        super();

        this.state = {
            timeout: 0
        }
    }

    componentWillMount() {

        // Register with Flux store.
        // On change run this._storeUpdated()
    }

    _storeUpdated() {

        if (this.state.timeout < 3) {
            console.log(this.state.timeout); // 0
            setTimeout(() => {
                this.setState({
                    authorized: false,
                    timeout: this.state.timeout + 1 // undefined?
                });
                // Force Flux store to update - re-runs this method.
            }, 1000)
        }
    }
}

为什么 this.state.timeoutundefined在调用中setState()？但是，如果我使用箭头函数该方法，那么它可以工作：

_storeUpdated = () => {

    if (this.state.timeout < 3) {
        console.log(this.state.timeout); // 0
        setTimeout(() => {
            this.setState({
                authorized: false,
                timeout: this.state.timeout + 1 // 1
            });
            // Force Flux store to update - re-runs this method.
        }, 1000)
    }
}

这里到底发生了什么？

4

1 回答 1

3

你可能会感到困惑，因为 React 在使用时会自动绑定React.createClass，但在继承自React.Component（即 ES6 方式）时不会自动绑定。此更改在0.13 beta1 博客文章中进行了解释。

在您的特定情况下，由于您使用的是Flux.getStore('store').on('change', this._storeUpdated);, （这是EventEmitter3 上的一种方法，由 Flummox 使用），因此上下文设置为EventEmitter对象，该对象与您的组件对象无关，也没有state属性。

请注意，您可以在注册事件侦听器时将 的值指定this为第三个参数：Flux.getStore('store').on('change', this._storeUpdated, <this-object>);

要在 ES6 类中实现自动绑定，您应该使用 React 博客文章中描述的任何方法。附带说明一下，如果您使用 ES7，您甚至可以使用自动绑定装饰器。

于 2015-07-09T09:47:36.757 回答