React で関数型 `setState` をいつ使用するか?

関数 setState を使用する場合

React の setState 関数を使用すると、コンポーネントが内部状態を更新し、コンポーネントとその子の再レンダリングをトリガーできます。ただし、状態を更新するには、オブジェクト メソッドと関数メソッドという 2 つの異なる方法があります。

オブジェクト メソッド

this.setState({pictures: pics})

このメソッドはシンプルで読みやすいです。ただし、バッチ処理に関して潜在的な問題があります。 React は、パフォーマンスを向上させるために、複数の setState 呼び出しを 1 つの更新にまとめて行うことがあります。 setState 呼び出しのいずれかが同じキーを使用する場合、最後の呼び出しのキーの値が使用されます。

関数メソッド

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

このメソッドは関数を使用して状態を更新します。以前の状態を引数として受け取り、新しい状態を返します。これにより、新しい状態を更新するときに以前の状態にアクセスできるようになり、現在の状態に依存する必要がある場合に役立ちます。

バッチ処理の問題がなくなるため、一般に関数型メソッドがオブジェクト メソッドよりも好まれます。 。これにより、同じレンダリング サイクルで複数の setState 呼び出しが行われた場合でも、状態が適切に更新されることが保証されます。

結論

状態の更新を扱うときは、一般に次の関数メソッドを使用することをお勧めします。状態を設定します。これにより、状態が適切に更新され、バッチ処理に関する潜在的な問題が回避されます。

以上がReact で関数型 `setState` をいつ使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。