Functional setState を使用する場合

React の setState 関数には、コンポーネントの状態を更新するための 2 つの構文、直接割り当て構文と関数アップデータ構文が用意されています。

直接割り当て構文:

this.setState({pictures: pics})

この構文は単純で使いやすいです。既存の状態値を、提供された新しい値に直接置き換えます。ただし、状態値が複数の場所で使用されている場合、またはコンポーネントのライフサイクル メソッド内で操作されている場合は、潜在的な問題が発生する可能性があります。

Functional Updater 構文:

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

状態更新の一貫性と予測可能性が保証されるため、関数型アップデーター構文が推奨されます。以前の状態を引数として受け取り、更新された状態を返します。これにより、偶発的な状態の変更が防止され、状態が常に最新であることが保証されます。

マージとバッチ処理

React は内部的に複数の setState 呼び出しを 1 つの更新にマージします。直接割り当て構文は、複数の呼び出しが同じ状態キーを更新しようとする場合に、マージの問題に対して脆弱です。例:

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

機能的なアップデータ構文は更新を自動的に正しくマージし、最終的な状態は pics1 と pics2 の両方を反映します。

パフォーマンスと効率

setState が呼び出すバッチに反応するパフォーマンス上の理由。複数の更新を 1 つにマージすることで、React はコンポーネントの更新を最適化し、不必要な再レンダリングを減らすことができます。関数アップデータ構文は、前の状態に依存して更新できるようにすることでバッチ処理をサポートします。

結論

両方の構文を使用して状態を更新できますが、関数アップデータ構文は次のとおりです。一貫性、安全性、マージ機能、およびパフォーマンスの最適化のサポートのため、一般的に推奨されます。関数アップデータ構文を使用することにより、開発者は状態の突然変異の問題を回避し、コンポーネントが正しく効率的に更新されることを保証できます。