このレンダリングメソッドは何をしますか：const {images、selectedImage} = this.state ;?

Question

Iが反応/ Reduxの上の簡単なチュートリアルをやっているし、我々が持っている理由私は理解していない、render（）メソッドでは、

のconst {行う画像を、selectedImage} = this.state。

私たちはコンストラクタに事前に定義された変数を割り当てる必要があることを理解し、それが私たちのコンポーネントの状態の一部となり、唯一の私たちのコンポーネントに漂っ単なる変数ではありませんが、私は何も取得しない理由は、私たちがすることはできませんあとでrenderメソッドで直接それらにアクセスするだけですか？なぜ彼らが定数として定義されているのか分かりません。私はまた、なぜ彼らは国家に割り当てられているのか、彼らにはなぜかっこがあるのはなぜ分かりませんか？おかげであなたの助けのためにたくさん

import React, {Component} from 'react' 

const flickrImages = [ 
    "https://farm2.staticflickr.com/1553/25266806624_fdd55cecbc.jpg", 
    "https://farm2.staticflickr.com/1581/25283151224_50f8da511e.jpg", 
    "https://farm2.staticflickr.com/1653/25265109363_f204ea7b54.jpg", 
    "https://farm2.staticflickr.com/1571/25911417225_a74c8041b0.jpg", 
    "https://farm2.staticflickr.com/1450/25888412766_44745cbca3.jpg" 
]; 

export default class Gallery extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     images: flickrImages, 
     selectedImage: flickrImages[0] 
    } 
    } 

    handleThumbClick(selectedImage) { 
    this.setState({ 
     selectedImage 
    }) 
    } 

    render() { 
    const {images, selectedImage} = this.state; // why do we have to do this? And why does this need to be a constant? 
    return (
     <div className="image-gallery"> 
     <div className="gallery-image"> 
      <div> 
      <img src={selectedImage} /> 
      </div> 
     </div> 
     <div className="image-scroller"> 
      {images.map((image, index) => (
      <div key={index} onClick={this.handleThumbClick.bind(this,image)}> 
       <img src={image}/> 
      </div> 
     ))} 
     </div> 
     </div> 
    ) 
    } 
} 

PS：あなたはこの質問のためのより良いタイトルを提案することができれば、私はそれを呼び出すことがわからなかった、私に知らせて、私はより良い名前が並べ替えがあります確信してください。ここで行われているもののうち

Answer 1

これはobject destructuringと呼ばれています。

this.state.imagesにローカル定数imagesとthis.state.selectedImageをローカル定数selectedImageに割り当てます。