1

ES6 クラス内でがどのように機能するかを理解するのに苦労しているthisため、あらゆる種類の一貫性を備えたアプリケーションを構築することが難しくなっています。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)
        }
    }
}

undefinedへの呼び出し内にthis.state.timeout があるのはなぜ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);は、 , ( Flummoxで使用される EventEmitter3のメソッド) を使用しているため、コンテキストはオブジェクトに設定されます。これは、コンポーネント オブジェクトとは関係なく、属性EventEmitterを持ちません。state

thisイベント リスナーを登録するときに、3 番目の引数としての値を指定できることに注意してください。Flux.getStore('store').on('change', this._storeUpdated, <this-object>);

ES6 クラスで自動バインドを実現するには、React ブログ投稿で説明されている方法のいずれかを使用する必要があります。補足として、ES7 を使用している場合は、 autobind デコレータを使用することもできます。

于 2015-07-09T09:47:36.757 に答える