Kann mir jemand dieses reaktive native Code-Snippet erklären?

Question

Ich fange an, in native Reaktion zu suchen, und für die meisten, wenn ich Gutes tue. Aber obwohl ich das Konzept der Destrukturierung kenne, kratze ich mich mit diesem Codeschnipsel am Kopf.

var { 
      View, 
      Text, 
      Image, 
      Animated, 
      StatusBarIOS, 
      TouchableOpacity, 
      DeviceEventEmitter 
    } = React; 

Kann mir jemand das erklären?
Danke!

Answer 1

Dies ist nur ES6 Objekt Destrukturierung. Es erstellt im Wesentlichen eine neue Variable für jedes der im Objekt aufgelisteten Schlüsselwörter.

Es ist equivilant zu:

var View = React.View; 
var Text = React.Text; 
var Image = React.Image; 
var Animated = React.Animated; 

.. etc

Wenn dies unklar ist, überhaupt als Beispiel ein einfaches Objekt aussehen:

const person = { 
    name: 'sam', 
    gender: 'male', 
    age: 52 
} 

// create a variable for any property you want from the person object 
let { name, age } = person; 

console.log(name) // 'sam' 
console.log(age) // 52.. 

Wie in den Kommentaren erwähnt Unten, da Sie bereits die ES6-Syntax verwenden, verwenden Sie höchstwahrscheinlich ein Build-Tool oder in einer Umgebung, die ES6 unterstützt, und Sie sollten let oderverwendenanstelle der ES5 var

Answer 2

Dies ist ES2015 "destructuring assignment". In einfachen Worten, dies ist eine Abkürzung für das Zuweisen mehrerer Variablen in einer einzelnen Anweisung und das Extrahieren ihrer Werte aus dem Objekt auf der rechten Seite des Operators =. Ist das gleiche wie zu tun:

var View = React.View, 
    Text = React.Text, 
    Image = React.Image, 
//... and so on. 

der wichtige Teil Also, hier zu beachten ist, dass dies ein kurzer Weg von dem folgenden ist:

var { 
    View: View, 
    Text: Text, 
    // ... 
} = React; 

Aber da die neu Variablen erstellt das gleiche haben Name als Objekteigenschaften reagieren, kann es zu vereinfachen:

var { 
    View, 
    Text, 
    // ... 
} = React;