React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的なイノベーションです。React は破壊的なフロントエンドフレームワークです。 React は公式には、ユーザーインターフェイスを作成するための宣言型で効率的かつ柔軟な JavaScript ライブラリとして紹介されています。React の主な機能は UI の構築ですが、プロジェクトが徐々に成長し、React はフロントエンドとバックエンドの両方をカバーする Web アプリソリューションになりました。

Angular はウォッチャーオブジェクトを使用し、Vue はオブザーバーモードを使用し、React は状態を使用します。それぞれに特徴があります。良いも悪いもなく、ニーズの違いによって選択が異なるだけです。

Reactの公式サイト: https://reactjs.org/GitHub

アドレスは https://github.com/facebook/react です。

1. Reactでは、onClick、onChangeなどのReactによって制御されるイベント処理関数、setStateは非同期です。

React をインポートします。{ コンポーネント } から 'react' をインポートします。

デフォルトクラス Input をエクスポートし、Component を拡張します {
    コンストラクタ(props) {
        スーパー(小道具);    

        this.state={
            名前: 'こんにちは'
        }    
    }

    _onChange(e) {
        this.setState({
            名前:'世界'
        })

        console.log(this.state.name); //こんにちは
    }

  与える （） {
    戻る （
      <div クラス名 = 'cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

2. addEventListenerなどのネイティブJSリスニングイベントでは、setStateは同期的です。

React をインポートします。{ コンポーネント } から 'react' をインポートします。

デフォルトクラス Input をエクスポートし、Component を拡張します {
    コンストラクタ(props) {
        スーパー(小道具);    

        this.state={
            名前: 'こんにちは'
        }    
    }

    _onChange(e) {
        // 何かをする
    }


    コンポーネントマウント() {
        入力を document.querySelector('.cp-input') にします。
        input.addEventListener('クリック', ()=>{
            this.setState({
                名前:'世界'
            })

            console.log(this.state.name); //ワールド
        })
    }

  与える （） {
    戻る （
      <div クラス名 = 'cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

3. setTimeoutではsetStatetは同期的である

React をインポートします。{ コンポーネント } から 'react' をインポートします。

デフォルトクラス Input をエクスポートし、Component を拡張します {
    コンストラクタ(props) {
        スーパー(小道具);    

        this.state={
            名前: 'こんにちは'
        }    
    }

    _onChange(e) {
        // 何かをする
    }


    コンポーネントマウント() {
        タイムアウトを設定します(()=>{
            this.setState({
                名前:'世界'
            })
            console.log(this.state.name); //ワールド
        }, 1000)
    }

  与える （） {
    戻る （
      <div クラス名 = 'cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

上記はReactのsetStateの同期と非同期のコードを詳細に解析した内容です。ReactのsetStateの同期と非同期の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: