web-dev-qa-db-fra.com

const ou let in React composant

Disons que j'ai un composant React - muet ou non -) et que je veux récupérer quelque chose dans le magasin et le mettre dans une variable pour rendre mon code un peu plus concis. Devrais-je utiliser const ou laisser? Clairement, l'état va changer.

Voici un exemple de ce dont je parle. Encore une fois, je tiens à souligner que myValues ​​VA changer lorsque l'utilisateur interagit avec mon application.

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)
reactjsecmascript-6
24
Sam

const vs let est principalement lié à la "modification" d'un bloc de code. Ce n'est important que dans des situations comme celle-ci:

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

Dans cette situation, vous devez utiliser let car vous modifiez la valeur attribuée à la variable myValues:

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

Si props.someData est en train de changer il va déclencher un re-rendu du composant. Donc, vs vs ne vient pas pour jouer. L'ensemble de la méthode render est réexécuté.

Cela dit, j’utilise const dans les situations que vous décrivez. Sauf si vous manipulez directement la valeur d'une variable, utilisez const.

21
erik-sn

const indique que la variable ne sera pas réaffectée .

let indique que la variable peut être réaffectée

Autres choses à méditer:

  • Utiliser const par défaut
  • Utilisez let seulement si une nouvelle liaison est nécessaire

  • const n’indique pas qu’une valeur est ‘constante’ ou immuable.

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

    Seule la liaison est immuable. En d'autres termes, l'utilisation d'un opérateur d'affectation ou d'un opérateur unaire ou postfixé - ou ++ sur une variable const lève une exception TypeError

  • ES6 const et let sont levés aussi. Bien que les identifiants aient la même référence de mémoire depuis la compilation, ils ne sont pas accessibles avant la déclaration dans le code. (mais pas comme nous pensions que la déclaration serait physiquement déplacée vers le haut dans le champ d'application);)

35
Yadhu Kiran

Laissez-moi me référer à la règle ESLint prefer-const il a une bonne explication à ce sujet.

La seule chose que je peux ajouter:

préférez commencer toutes les variables avec const si vous n'êtes pas sûr

même si vous le modifiez plus tard, le débogueur vous en informera

3
Oleg Pro