奇妙な矢印の関数のパラメータの動作

Question

これら2つのコードスニペットの違いは何ですか？

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

と、この1：

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

唯一の違いは、矢印関数のパラメータ・リストの中括弧である...しかし、それは異なる動作を持っている...最初の例ではarticleアクセス可能なプレーンなオブジェクトとして。 ..しかし、2番目のものでは、getterや何かのようなものにアクセス可能な記事...

Answer 1

これはES6の非構造構文を使用しています。

本質的にArticleはオブジェクトを期待しています。それはその後、新しい特性に破壊されている。

あなたの最初の項目：

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

は同等です：

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

Mozillaの開発者ネットワークは、両方の配列/オブジェクトの非構造フォーム上の素晴らしい記事があります。https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

これは、配列とオブジェクトを破壊するためのES6機能です。

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