2
votes

Meilleures pratiques pour mutable | objets immuables

Devrions-nous utiliser la première ou la deuxième manière de mettre à jour l'objet de paramètres dans l'état? Quelle est la meilleure pratique pour le mutable | concept immuable?

state = {
  settings: {
    at: [],
    // other keys
  }
}


addHour = () => {
    const { settings } = this.state;

    const time = moment();
    time.set({ minutes: 0, seconds: 0 });

    // First Way
    settings.at.push(time);
    this.setState({ settings });

    // Second Way
    const new_settings = {
        ...settings
        at: [...settings.at, time]
    }
    this.setState({ settings: new_settings });
};

javascript reactjs ecmascript-6

4 commentaires

le premier est probablement faux, vous n'êtes pas censé faire muter l'état. ( daveceddia.com/why-not-modify-react-state-directly < / a>)

Deuxièmement, si les références sont les mêmes, un nouveau rendu n'est pas garanti.

La deuxième manière est la bonne manière

il existe une copie profonde et une copie superficielle pour les types de données composites. Dans votre première manière, vous le faites comme une copie superficielle et dans la seconde comme une copie profonde. Les deux copient mais de différentes manières dépend si vous voulez faire référence ou non à l'objet d'origine

3 Réponses :

2
votes

Le code

let state = {
  settings: [1, 2, 3]
}
let settings = [...state.settings]
settings.push(4)

console.log(settings)
console.log(state)

cela ne fait aucune copie, c'est juste une référence et quand vous faites settings.at.push (time); vous êtes objet d'origine en train de muter

let state = {
  settings: [1,2,3]
}
let {settings} = state
settings.push(4)

console.log(settings)
console.log(state)

Si votre tableau de paramètres a toujours un niveau de profondeur, vous pouvez utiliser spread operator sinon vous pouvez utiliser JOSN.parse (JOSN.stringify ()) pour créer un clone profond

const { settings } = this.state;

1 commentaires

@ Kevin.a est considéré comme une bonne pratique de répondre de manière détaillée, ce qui aidera aussi les futurs lecteurs. Merci mon pote :)

1
votes

Dans un premier temps, vous modifiez toujours l'objet d'état d'origine. C'est appelé une référence à l'objet original. La deuxième manière fait un clone de l'état. Ses 2 objets différents.

0 commentaires

0
votes

Dans un premier temps, vous faites référence à l'état réel, en le faisant muter.

Dans le second cas, vous ne faites pas muter l'état, soyez néanmoins conscient d'une chose:

ce type d'affectation n'est pas thread-safe, regardez l'exemple suivant:

this.setState(oldSettings => {
    const newSettings = {...oldSettings};
    //modify the copy newSettings
    return newSettings;
});

Je choisirais ce qui suit:

const { settings } = this.state;

const time = moment();
time.set({ minutes: 0, seconds: 0 });

// If at this execution point another procedure changes the state (e.g. setting another key in the state object)
const new_settings = {
    ...settings
    at: [...settings.at, time]
};
// You are actually setting an "old" state for some keys
this.setState({ settings: new_settings });

NB Si l'état est complexe, vous devez le cloner en profondeur!

0 commentaires