web-dev-qa-db-ja.com

反応：状態としてのネストされたオブジェクトと個々のプロパティ

ネストされた状態のオブジェクトが個々のプロパティよりも操作に最適/簡単であるユースケースはありますか？

たとえば、ある状態で写真を操作するためのいくつかのユーザーコントロールを表現したい場合は、次のように記述できます（ネストされたオブジェクト）。

this.state = {
   photoControls: {
      open: false,
      id: null,
      thumbnailUrl: null
   }
}

または、次のように書くこともできます（個々のプロパティ）：

this.state = {
   photoControlsOpen: false,
   photoControlsId: null,
   photoControlsThumbnailUrl: null
}

ネストされたオブジェクトスタイルの状態を使用してプロパティを論理的にグループ化できますが、これらのプロパティの1つまたは2つだけを更新しようとすると、より冗長になるだけです。

とはいえ、個々のプロパティを使用するのではなく、状態でネストされたオブジェクトを使用する利点（ある場合）は何ですか？ネストされたオブジェクトがfeelより適切である可能性があることを理解していますが、それらの利点を考えることができません。誰か洞察力がありますか？

design-patternsjavascriptstatereactjs
6
connected_user

それはおそらく将来の開発に依存します。 PhotoControls用に個別のオブジェクトを作成することは、オブジェクトが再利用されない場合、時間とコードの無駄になります。ただし、PhotoControlsが別のオブジェクトで使用される可能性がある場合は、抽象化が本当に役立つ場合にのみ、それを個別に定義することをお勧めします。別のオブジェクトのPhotocontrolsオブジェクトに、古いコンテキストでは関係のない属性が必要な場合は、バグトラップが作成されている可能性があります。

不要なサブオブジェクトを作成したことを後悔していることが多く、有用なときにサブオブジェクトを作成できてとても嬉しいです。将来何をしたいかを考えてください。あなたはいつも正しいとは限りませんが、事前にそれについて考えることはあなたの確率を向上させます。

1
MarvW

オーディオ/ビデオの抽象化状態は良い例です：

video: {
            readyState,
            networkState,
            error: error || networkState === 3,
            // TODO: This is not pretty. Doing device detection to remove
            // spinner on iOS devices for a quick and dirty win. We should see if
            // we can use the same readyState check safely across all browsers.
            loading: readyState < (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 1 : 4),
            percentagePlayed: getPercentagePlayed(restState),
            percentageBuffered: getPercentageBuffered(restState),
            ...restState
        }

参照

0
Paul Sweatte