constまたはletをリアクトコンポーネントに入れよう

Question

私はReactコンポーネントを持っていると言いますが、私はそのストアから何かをつかんで変数に入れて、コードをちょっと簡潔にしたいとします。 constを使うべきか、letを使うべきか？明らかに状態は変わるでしょう。

ここに私が話している事例があります。ここでも、ユーザーが自分のアプリとやり取りするときにmyValuesが変更されることを強調したいと思います。 let対

class MyComponent extends Component { 

    render() { 

     // Here, should I use const or let? 
     const myValues = this.props.someData; 

     return(
      <div> 

      {myValues.map(item => (
        <SomeOtherComponent key={item.id} data={item} /> 
       ))} 

      </div> 
     ); 
    }; 
} 

function mapStateToProps(state) { 
    return { 
     someData: state.someValuesComingFromApi 
    } 
} 

export default connect(mapStateToProps)(MyComponent) 

Answer 1

constは、コードブロック内の「変更」を行うことがほとんどです。また、このような状況でのみ事項：props.someDataは、それが引き金となる変更された場合

let myValues = this.props.someData; 
if (*some condition*) { 
    myValues = []; 
} 

：あなたが聞かせて使用する必要があります。このような状況で

const myValues = this.props.someData; 
if (*some condition*) { 
    myValues = []; 
} 

あなたは変数myValuesに割り当てられた値を変更しているので、コンポーネントの再レンダリングだからconst vs letは遊びに来ない。 renderメソッド全体が再実行されます。

だから、私は説明している状況でconstを使用します。変数の値を直接操作しない限り、constを使用します。

Answer 2

私はESLint規則prefer-constを参照してください。この点については良い説明があります。

唯一私が追加することができます。

はあなたがわからない場合constですべての変数を開始することを好む

あなたが後でそれを変異させた場合でも、デバッガはあなたに通知されます

Answer 3

constは、の変数をに再割り当てしないという信号です。

let

は変数が熟考する

追加物事を再割り当てすることができるという信号である：再バインドが必要な場合にのみ

使用letデフォルトで

• 使用const

• constはthを示していません値が「一定」または不変である。

  const foo = {}; 
  foo.bar = 10; 
  console.log(foo.bar); // --> 10 
  

  バインディングのみが不変です。つまり、代入演算子または単項またはpostfixの使用 - のconst変数上または++演算子は

• ES6 constとlet TypeError例外をスローしすぎhoistedあります。識別子はコンパイル時と同じメモリ参照を持ちますが、コード内で宣言する前にアクセスすることはできません。（ただし、宣言はスコープ内の先頭に物理的に移動するとは考えていませんでした）;