Merkwürdiger Pfeil Funktion Parameter Verhalten

Question

Was ist der Unterschied zwischen diesen beiden Code-Schnipsel?

const Article = ({article}) => { 
    return ( 
     <article key={article.id}> 
      <a href={article.link}>{article.title}</a> 
      <p>{article.description}</p> 
     </article> 
    ); 
}; 

und diese:

const Article = (article) => { 
    return ( 
     <article key={article.id}> 
      <a href={article.link}>{article.title}</a> 
      <p>{article.description}</p> 
     </article> 
    ); 
}; 

Der einzige Unterschied ist geschweiften Klammern in Pfeilfunktionsparameter Liste ... aber es eine anderes Verhalten hat ... in erstem Beispiel article zugänglich als einfaches Objekt. .. aber in der zweiten, Artikel zugänglich wie eine Art Getter oder so ähnlich ...

Answer 1

Dies wird unter Verwendung der Syntax der Destrukturierung ES6.

Im Wesentlichen erwartet Article ein Objekt. Das wird dann in neue Eigenschaften destrukturiert.

Ihr erster Artikel:

const Article = ({article}) => { 
    return ( 
    <article key={article.id}> 
     <a href={article.link}>{article.title}</a> 
     <p>{article.description}</p> 
    </article> 
); 
}; 

entspricht:

const Article = (props) => { 
    const article = props.article; 
    return ( 
    <article key={article.id}> 
     <a href={article.link}>{article.title}</a> 
     <p>{article.description}</p> 
    </article> 
); 
}; 

Das Mozilla Developer Network einen großen Artikel auf beiden Array/Objekt Destrukturierung Formen hat: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

Es ist eine ES6-Funktion zum Destrukturieren von Arrays und Objekten.

http://es6-features.org/#ParameterContextMatching