Как работает инициализация этого объекта для реквизита?

Question

Я нашел этот код и хотел бы объяснить, почему после инициализации требуется '= {}'.Я могу понять, что 1) const делает объект props const (а не его содержимое) 2) поля, такие как elementDimensions.width, инициализируются, но объект имеет значение = {}, зачем это нужно?3) в конце это '= props', возможно ли, что 'props' добавляет поля к этому объекту?Спасибо.

export default (props) => {
    const {
        elementDimensions: {
            width = 0,
            height = 0
        } = {},
        isActive = false,
        isOutside = true,
        point: {
            x = 0,
            y = 0
        } = {}
    } = props;

    return (
        <div>
            {`x: ${x}`}<br />
....

Answer 1

1. Это синтаксис деструктурирования , а не просто присвоение переменной.Переменные, извлеченные из props, являются const с и не могут быть переназначены, то есть переменные с именами width, height, isActive, isOutside, x и y.(Здесь инициализация объекта отсутствует - props уже определен как параметр функции)

2. = {} требуется для предоставления значения по умолчанию для elementDimensions.Без этого деструктуризация width и height завершится неудачей, если props.elementDimensions не определено:

const props = {};
const {
  elementDimensions: {
    width = 0,
    height = 0
  }
} = props;

= props - это просто более деструктурирующий синтаксис.Например,

const { foo } = bar;

извлекает свойство foo из объекта bar и помещает его в переменную с именем foo.

Аналогично = bar выше, = props в вашем коде извлекает свойства из объекта props и помещает их в имена переменных.