ES6類如何編譯？

Question

當我希望對本機動畫文檔做出反應時，我讀了一些有趣的文章。 代碼段：

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }

  // Other parts of code piece ...
  // https://facebook.github.io/react-native/docs/animations.html
}

讓我們分解一下這里發生的事情。 在FadeInView構造函數中，將初始化為狀態的一部分的名為AnimationAnimation.Value的新動畫。

在上述聲明中，文檔提到狀態是在構造函數中初始化的。 但是，此代碼段中沒有構造函數。 根據其他語言（例如c＃和c ++等）的知識，可以在沒有構造函數的類中聲明和初始化變量。

1. 我實際上不了解javascript的底層過程，這些變量如何在es6類中聲明和初始化。
2. 為什么他在沒有構造函數的情況下提及構造函數。
3. es6類如何編譯？ （這可能很長，總體情況可以滿足我的需求）

Answer 1

state是一個類屬性，當前不是ES6 +標准功能。 因此，您需要Babel Stage 2 preset才能轉換類屬性 。

當前，該插件轉換將類屬性移到構造函數中。 檢查babel repl輸出

簡化的Babel輸出：

 function FadeInView() { this.state = { fadeAnim: new Animated.Value(0) // Initial value for opacity: 0 }; }; 

與類字段聲明有關的更多信息

Answer 2

實際上將類屬性（一個js提議 ）移到了構造函數中：

  class FadeInView extends React.Component {
   constructor() {
    this.state = {
      fadeAnim: new Animated.Value(0),  // Initial value for  
      opacity : 0
    };
   }
 }