コンストラクタと状態の状態を初期化する

Question

ES6で初期状態を設定する2つの方法の違いは何ですか？対

constructor(props) { 
    super(props); 

    this.state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3', 
    } 
} 

：

state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3', 
    } 

Answer 1

前者は後者のためだけの構文砂糖ですので、コンストラクタの引数へのアクセスは本当に唯一の違いです。クラスプロパティの矢印関数バインドを使用して関数を宣言する理由でもある

class Example { 
    constructor() { 
    this.state = { 
     highlighted: 5, 
     backgroundColor: '#f3f3f3' 
    }; 
    } 
} 

---

：出力

class Example { 
    state = { 
    highlighted: 5, 
    backgroundColor: '#f3f3f3', 
    } 
} 

：提案クラスのプロパティの構文を処理するだけbabel-preset-stage-2プリセットを使用して

This is how it gets transpiled by Babelそれをインスタンスに渡します。

It gets moved into the constructorここで、矢印機能が保持する値は新しいインスタンスです。

class Example { 
    boundFunction =() => { 
    // ... 
    } 
} 

出力：

class Example { 
    constructor() { 
    this.boundFunction =() => { 
     // ... 
    }; 
    } 
}