Wat is er in de previce in reacters? [DUPLICEER]

Ik denk dat het misschien domme vraag is om te vragen, maar vertrouw me, ik ben beginners tot reacters. Kunnen iemand me alsjeblieft uitleggen waarom we gebruiken die in reactjes prevroduceren. Ik heb het moeilijk geprobeerd te begrijpen, maar faalde.

Hier is mijn code. Help me alsjeblieft om

te begrijpen

state = {
    placeName : '',
    places : []
}
placeSubmitHanlder = () => {
    if(this.state.placeName.trim()===''){
      return;
    }
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName)
      };
    });
  };

Antwoord 1, Autoriteit 100%

prevStateis een naam die u hebt gegeven aan het argument dat is doorgegeven aan SetState Callback-functie. Wat het geldt is de toestand van de staat vóór de setStatewerd geactiveerd door reageer; Sinds setStatedoet Batching, het is soms belangrijk om te weten wat de vorige staat was wanneer u de nieuwe status wilt bijwerken op basis van de vorige statuswaarde.

Dus als er meerdere setstaatoproepen dezelfde toestand bijwerken, kunnen batching SetState-oproepen leiden tot onjuiste status die wordt ingesteld. Overweeg een voorbeeld:

state = {
   count: 0
}
updateCount = () => {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
}

In de bovenstaande code zou u kunnen verwachten dat de waarde van counten 4 is, maar het zou daadwerkelijk 1 zijn, aangezien de laatste oproep naar Setstate elke eerdere waarde tijdens het batching zal overschrijven. Een manier om dit op te lossen om functionele setstate te gebruiken:

updateCount = () => {
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
}

Antwoord 2, autoriteit 11%

Je gebruikt het wanneer je de huidige status wilt overschrijven met de parameters van de laatste status.

Van React-documenten:

Volgens de React-documenten “kan React meerdere setState()-aanroepen in één update samenvoegen voor prestaties. Omdat this.propsen this.stateasynchroon kan worden bijgewerkt, moet u niet vertrouwen op hun waarden voor het berekenen van de volgende status.”

“Om het op te lossen, gebruikt u een tweede vorm van setState()die een functie accepteert in plaats van een object. Die functie krijgt de vorige status als het eerste argument en de rekwisieten op dat moment de update wordt toegepast als het tweede argument”

Link

Antwoord 3, autoriteit 3%

Hier is een demo met een uitgecommentarieerde code om u meer informatie te geven: http://codepen .io/PiotrBerebecki/pen/rrGWjm

constructor() {
  super();
  this.state = {
    value: 0
  }
}

Reageer documenten: https://facebook.github. io/react/docs/reusable-components.html#es6-classes

De API [React ES6 class] is vergelijkbaar met React.createClass met uitzondering van getInitialState. In plaats van een aparte getInitialState-methode op te geven, stelt u uw eigen state-eigenschap in de constructor in.

Waar komt prevState vandaan?

De prevState komt van de setState-api: https://facebook .github.io/react/docs/component-api.html#setstate

Het is ook mogelijk om een functie door te geven met de handtekeningfunctie (status, rekwisieten). Dit kan in sommige gevallen handig zijn wanneer u een atomaire update in de wachtrij wilt plaatsen die de vorige waarde van state+props raadpleegt voordat u waarden instelt. Stel bijvoorbeeld dat we een waarde in status willen verhogen:

this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});