React.jsのコンポーネントに適した文法はどれですか

Question

React.jsを学ぶときに質問があります。

公式文書またはいくつかの教科書によると、私は、反応コードの2つの方法があることを発見しました。しかし、私はどちらの方が良いかは分からなかった。

class SampleComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: 'react' 
    }; 
    } 

    render() { 
    return (
     <p> Hello {this.state.value} !! </p> 
    ); 
    } 
} 

とこれ以外はこれです。

var SampleComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     value: 'react' 
    }; 
    }, 

    render: function() { 
    return (
     <p> Hello {this.state.value} !! </p> 
    ); 
    } 
}); 

誰かが何が何であり、どちらが良いのかを説明することはできますか？おかげさまで

Answer 1

どちらも問題ありません。最初のコードはES2015（またはES6）ですが、一部の古いブラウザではサポートされていないため、通常はbabelを使用してコードをES5コード（2番目のコード）にコンパイルします。

しかし、JS20をコンパイルする必要があり、とにかくbabelを使用するため、開発者にとって、ES2015の構文ははるかに明確で簡単です。 ES2015に行くことはできますが、ES2015を学ぶ前に、ES5スキルを習得することをお勧めします。

Answer 2

私はバージョン間の違いを再確認しませんが、2番目の例ではわかりやすく直感的です。あなたがまだリアクトを学んでいる、またはまだ学習しているかもしれない他の人と働いているなら、ES5はみんなを幸せにします。

Answer 3

ありがとうございます。私はES5、ES6とその違いを知らなかった。 私はES6の使用に興味がありますが、私はjsを始めていて、多くのコーダーと同じです。 ES6ではなくES5を使用します。

Answer 4

クラス表記はEs6形式であり、多くの利点があります。

1. 少なくともOOPSプログラマ（Java、C++）では読みやすくなっています。
2. "this"コンテキストのバインディングは、より簡単で明確です（矢印機能を使用）。
3. letとconstキーワードを使用している場合は、グローバルスコープが低下します。
4. プロトタイプの継承を容易にエミュレートする（この場合、React.Componentを拡張する）

5. 最も重要なのは、Es6モジュールを使用してコードを整理することです。

   class SampleComponent extends React.Component { 
         constructor() { 
         super(); 
         this.state = { 
          value: 'react' 
         }; 
         } 
   
         render() { 
         return (
          <p> Hello {this.state.value} !! </p> 
         ); 
         } 
        }