Deklarieren von Const mit geschweiften Klammern in JSX

Question

Ich bin gerade dabei, mit Native React zu beginnen und mich an die JSX-Syntax zu gewöhnen. Spreche ich darüber? Oder rede ich über TypeScript? Oder ... ES6? Wie auch immer ...

Ich habe gesehen:

const { foo } = this.props; 

Innerhalb einer Klassenfunktion. Was ist der Zweck der geschweiften Klammern und was ist der Unterschied zwischen ihnen zu verwenden und sie nicht zu verwenden?

Answer 1

Es ist destructuring assignment.

Die Destrukturierung Zuordnung Syntax ist ein JavaScript-Ausdruck, dass es ermöglicht, Werte von Arrays zu entpacken oder Eigenschaften von Objekten , in verschiedene Variablen.

Beispiel (ES6):

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

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

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

Sie können weitere Informationen finden Sie unter MDN

EDIT: auch für Entwickler vertraut mit Python-Sprache kann es interessant sein, zu vergleichen mit Syntax Python Auspacken. python2.7:

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

Mit neuer Funktion von Python3, wie PEP 3132 können Sie auch noch folgende:

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

Beispiele hinzugefügt werden, weil aus anderen Sprachen bereits ähnlichen Ansatz zu wissen, können Sie JS Idee erfassen schneller.

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(),......}