React propTypes: objectOf vs shape?

Яка різниця між PropTypes.objectOfта PropTypes.shape? У документах :

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)

проти

// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

Коли я повинен використовувати objectOfі коли я повинен використовувати shape?

PropTypes.objectOf використовується при описі об’єкта, властивості якого однакові.

const objectOfProp = {
  latitude: 37.331706,
  longitude: -122.030783
}

// PropTypes.objectOf(PropTypes.number)

PropTypes.shape використовується при описі об’єкта, ключі якого відомі заздалегідь, і можуть представляти різні типи.

const shapeProp = {
  name: 'Jane',
  age: 25
}

// PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })

Просто хотів навести приклад, враховуючи наступний об’єкт:

{
    petStore: {
        animals: {
           '23': { name: 'Snuffles', type: 'dog', age 13 }
           '29': { name: 'Mittens', type: 'cat', age: 7 }
        }
    }
}

ObjectOf і Shape

Використовується, коли об’єкт може мати різні імена властивостей, але послідовний набір властивостей для кожного:

const animalItemShape = {
    name: PropTypes.string,
    type: PropTypes.string,
    age: PropTypes.number
}

const petStoreShape = {
    animals: PropTypes.objectOf(PropTypes.shape(animalItemShape))
}

Як бачите, animalsце об’єкт, що складається з безлічі властивостей, кожна відповідає animalItemShapeтипу.

Сподіваюся, це допоможе!