Объявление Const With Curly Braces в JSX

Question

Я только начинаю с React Native и привык к синтаксису JSX. Это то, о чем я говорю? Или я говорю о TypeScript? Или ... ES6? Так или иначе ...

Я видел это:

const { foo } = this.props; 

Внутри функции класса. Какова цель фигурных скобок и какая разница между их использованием и не использованием?

Answer 1

Это destructuring assignment.

Синтаксис присваивания деструктурирующего является выражением JavaScript, что делает возможным распаковывать значения из массивов, или свойства из объектов, в различные переменные.

Пример (ES6):

var person = {firstname: 'john', lastname: 'doe'}; 

const firstname = person.firstname; 
const lastname = person.lastname; 

// same as this 
const { firstname, lastname } = person; 

Вы можете найти более подробную информацию на MDN

EDIT: также для разработчиков, знакомых с языком Python может быть интересно сравнить с Python распаковки синтаксиса. python2.7:

>>> _tuple = (1, 2, 3) 
>>> a, b, c = _tuple 
>>> print(a, b, c) 
(1, 2, 3) 

С новой функцией Python3, как PEP 3132 вы также можете сделать следующее:

>>> _range = range(5) 
>>> a, *b, c = _range 
>>> print(a, b, c) 
0 [1, 2, 3] 4 

Примеры добавлены, потому что уже зная подобный подход от других языков, вы можете ухватить JS идею быстрее.

Answer 2

Yes this is destructuring assignment feature of ECMASCRIPT 6 

For Example : 

const { createElement } = React 
const { render } = ReactDOM 

const title = createElement('h1',{id: 'title', className: 'header'},'Hello 
    World') 

render(title,document.getElementById('react-container')) 

here React = { cloneElement : function(){},createElement : function() 
    {},createFactory : function(),......}