ES6 Syntax Objekt Kurze Notation und berechnete Eigenschaften

Question

Ich lerne react-native. Ich kam in dieser Syntax von ES6

Erste Syntax

this.state = { 
    refreshing: false, 
}; 

Zweite Syntax

this.state = {[refreshing]: false}; 

Wird es gleiche Aufgabe erfüllen? Wenn diese Zeile Code gleicher Aufgabe dann, was der Unterschied zwischen Objekt Kurz Notation und Computed Eigenschaften ist

Answer 1

Nein, sie sind völlig verschieden:

const state = { 
    refreshing: false, 
}; 
console.log(state); // { refreshing: false } 

In Ihrem zweiten Beispiel:

const state = {[refreshing]: false}; 
// Error: refreshing is not defined 

Diese ist, weil berechnete Eigenschaften innerhalb des zugänglichen Bereichs nach einer Variablen namens refreshing suchen. Zum Beispiel:

const refreshing = "example"; 
const state = { [refreshing]: false }; 
console.log(state); // { example: false } 

Also das Äquivalent zu Ihrem ersten Beispiel in berechnete Eigenschaft Syntax wäre:

const key = "refreshing"; 
const state = {[key]: false}; 
console.log(state); // { refreshing: false } 

Aber Sie würden diese nur verwenden, wenn Sie nicht key im Voraus wissen.