React で一貫した状態を更新するには関数 setState が推奨されるのはなぜですか?

関数 setState: その目的と利点を理解する

React では、コンポーネントの状態を管理することが重要です。状態を変更するための重要なメソッドの 1 つは setState() です。 setState() の使用方法はいくつかありますが、

this.setState({ pictures: pics });

と

this.setState(prevState => ({ pictures: prevState.pictures.concat(pics) }));

という 2 つの一般的な構文には違いがあります。主な違いは、これらの構文が状態更新をどのように処理するかにあります。同じレンダリング サイクル内で複数の setState() 呼び出しが発生します。

関数型 setState が推奨される理由

setState() は非同期更新を実行します。つまり、状態はすぐには変更されません。さらに、React はパフォーマンスを向上させるために複数の setState() 呼び出しをバッチ処理することがあります。これは、最初の例では、同じレンダリング サイクル内で setState() が複数回呼び出された場合、状態の更新は最終値でのみ発生する可能性があることを意味します。一方、

関数 setState は状態を保証します。更新には一貫性があり、予測可能です。 2 番目の構文では、アップデーター関数は現在の状態を引数として受け取り、以前の値に基づいて状態を変更できるようにします。これにより、複数の setState() 呼び出しが発生した場合でも、更新された状態が正しく計算されることが保証されます。

例

次のシナリオを考えてみましょう:

myFunction = () => {
   ...
   this.setState({ pictures: this.state.pictures.concat(pics1) });
   this.setState({ pictures: this.state.pictures.concat(pics1) });
   this.setState({ pictures: this.state.pictures.concat(pics1) });
   ...
};

この場合、状態は pics1 の最終値で 1 回だけ更新されます。

Functional setState の追加の利点

• 強化コードの再利用性: 関数型 setState により、状態更新ロジックの再利用が容易になります。
• パフォーマンスの向上: 関数型 setState は、不要な状態更新を防止することで、パフォーマンスを向上させる可能性があります。
• エラー防止: Functional setState は、不正な状態の突然変異や競合状態などの一般的な落とし穴を回避するのに役立ちます。

結論として、どちらの構文でも状態を更新できますが、Functional setState を強くお勧めします。これは、特にレンダリング サイクル内で複数の setState() 呼び出しが含まれるシナリオで、一貫性のある予測可能な更新を保証するという利点があるためです。これは、状態管理に対するより安全で柔軟なアプローチを提供し、コードの保守性を促進し、潜在的な問題を軽減します。

以上がReact で一貫した状態を更新するには関数 setState が推奨されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。