非同期反応—設定状態

まず、Reactは楽しいです。私はそれに足を踏み入れ始めたばかりですが、なぜそれが業界を席巻したのかはすでにわかります。興味深いアプリケーションを開発しているスピードは素晴らしく、学び続けることに興奮しています。

私が気づいたことの1つは、ReactはJavaScriptに基づいて構築されているため、シングルスレッドアプリケーションであるということです。これは、JavaScript（およびReact）が一度に実行できることは1つだけであることを意味します。最適化されたシングルスレッド言語であるため、非常に効率的で迅速に実行できますが、その性質上時間がかかるアクションが存在する場合があります。このコードはブロッキングコードと見なされ、JavaScriptはそれをわずかに異なる方法で処理します。

コードをブロックする一般的な例は、APIフェッチ、データベースへの保存、Reactでの状態の設定です。これらのコードは不確定な時間がかかる可能性があるため（特に、返される情報の量や接続の品質がわからないためフェッチします）、スムーズに実行し続けるために、JavaScriptが終了するまで遅延します。現在のキュー。準備ができていない場合、この遅延は大きな影響を与える可能性があります。そのため、フェッチを使用する.then()かawait、フェッチを操作するときに、JavaScriptにフェッチが完了するのを待ってから、関連する手順に進むように指示します。

では、Reactで状態を設定するのはどうですか？前述したように、これも非同期アクティビティであり、このトピックに関するReact Docsによると、setState()アクティビティはバッチ処理される可能性があります。あなたが気づいていて注意していない場合、これはいくつかの非常に奇妙なバグにつながる可能性があります。

たとえば、以下の関数はnewPokemonオブジェクトを取り込んで、その状態の既存のポケモンの配列に追加します。

addNewPokemon = (pokemon) => {
    this.setState({pokemon:[...this.state.pokemon, newPokemon]})
}

前の状態

setStateが呼び出されると、関数が最初に呼び出されたときの状態と、その時点で使用可能な小道具にアクセスできます。

this.setState((previousState, previousProps) => {
    return{ //your state setting stuff here }
    }
);

this.setState( function( previousState, previousProps ) {
   return { //your state setting stuff here }
   }
);

addNewPokemon = (pokemon) => {
    this.setState(oldState => {
       return { pokemon: [...oldState.pokemon, newPokemon]}
    })
}

したがって、ReactアプリケーションでsetStateを使用するときは、Reactで待機する必要がある場合に備えて、前の状態を使用することを忘れないでください。