Я уверен, что все проделали простую деструктуризацию. В современном синтаксисе мы часто используем их, чтобы сделать код более читаемым, и мы видели некоторые компромиссы с точки зрения разработки и оптимизации. Вместо того, чтобы просто принимать все как есть, как многие из нас делали в прошлом. Поговорим об этом и о том, как это работает.

Если вы используете React, нет никаких сомнений в том, что вы деструктурировали. Это одна из первых вещей, которую вы делаете, и она стала такой базовой концепцией, и, увидев ее несколько раз, вы как бы понимаете ее на фундаментальном уровне, потому что она просто разработана так хорошо и интуитивно понятно.

Очевидно, что каждый должен знать об useState, который должен быть частью каждого кода. Но вспомните былые времена, когда вы все еще использовали класс в своем коде React и вам нужно было указать компонент.

Помните те дни? Нефункциональные компоненты и расширение React.Component - это взрыв из прошлого, но он действительно должен рассказать вам, что мы делаем с точки зрения деструктуризации. Он сообщает нам, что импорт React из «react» дает нам объект с кучей пар ключ-значение внутри него. Поэтому, когда мы вызываем React.Component, мы на самом деле просто вызываем ключ «Component», и значение этого ключа затем расширяется в класс.

Точно так же useState - еще один ключ. Он хранит функцию, поэтому мы можем вызвать useState () в нашем коде для ее вызова. На самом деле то, что мы делаем, представляет собой своего рода развитие синтаксиса JavaScript. Что мы ДЕЙСТВИТЕЛЬНО делаем, так это указываем useState как КЛЮЧ и назначаем ЗНАЧЕНИЕ как ЖЕ ИМЯ. У нас была эволюция JS, в которой мы могли комбинировать пары ключ-значение. Где {example: example} можно было бы сжать до {example}. Итак, теоретически вы можете сохранить useState как совершенно другое имя переменной, но оно должно быть где-то ниже как назначение, а не как импорт.

Это действительно здорово, потому что с этими знаниями мы можем понять, как получить доступ к вложенным парам "ключ-значение".

Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment