const oder lassen Reagieren Komponente

Question

Sagen wir, ich habe eine React-Komponente - dumm oder nicht - und ich möchte etwas aus dem Speicher zu nehmen und es in eine Variable setzen, um meinen Code ein wenig knapper zu machen. Soll ich const oder let verwenden? Offensichtlich wird sich der Staat ändern.

Hier ist ein Beispiel für das, worüber ich spreche. Auch hier möchte ich betonen, dass myValues ​​sich ändern wird, wenn der Benutzer mit meiner App interagiert.

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 vs let ist meist mit "Ändern" in einem Codeblock zu tun. Es kommt nur in Situationen wie dieser:

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

In dieser Situation verwenden, müssen Sie lassen würde, weil Sie den Wert der Variablen myValues zugeordnet ändern:

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

Wenn props.someData ändert es auslösen ein Rendern der Komponente. So const vs let kommt nicht zum spielen. Die gesamte Methode render wird erneut ausgeführt.

Also das gesagt, ich verwende const in den Situationen, die Sie beschreiben. Wenn Sie nicht direkt den Wert einer Variablen manipulieren, verwenden Sie const.

Answer 2

Lassen Sie mich auf ESLint Regel prefer-const verweisen es hat eine gute Erklärung zu diesem Thema.

Das einzige, was ich kann hinzufügen:

bevorzugen alle Variablen mit constzu starten, wenn Sie nicht sicher sind,

auch wenn Sie es später mutieren, wird der Debugger informieren Sie

Answer 3

const ist ein Signal, dass die Variable nicht neu zugewiesen wird.

let ist ein Signal, dass die Variable

Zusätzliche Dinge neu zugewiesen werden können, darüber nachzudenken:let

• Verwenden const standardmäßig
• Nur wenn Rebinding benötigt wird

• const zeigt nicht th an bei einem Wert ist "konstant" oder unveränderlich.

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

  Nur die Bindung ist unveränderlich. dh einen Zuweisungsoperator oder ein unärer Postfix oder unter Verwendung von - oder Operator ++ auf einer const variable wirft eine Typeerror Ausnahme

• ES6 const und lethoisted auch sind. Obwohl die Bezeichner von der Kompilierzeit dieselbe Speicherreferenz haben, können sie nicht vor der Deklaration im Code zugegriffen werden.(aber nicht so, wie wir dachten, dass die Deklaration physisch nach oben in den Bereich verschoben würde);)