javascript - React setState-funksjon

Hva er forskjellen mellom disse to funksjonene for oppdatering av tilstand, og hva er den anbefalte tilnærmingen? Begge funksjonene fungerer bra i applikasjonen min.

Alternativ 1

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile((prevState) => {
    return {
      ...prevState,
      age: profile.age + 100,
    }
  });

Alternativ 2

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile({
    ...profile,
    age: profile.age + 100,
  });

Svar #1

Normalt, hver gang du ønsker å oppdatere tilstanden din basert på din forrige tilstand, bør du bruke den funksjonelle måten å oppdatere tilstanden på. Det sørger for at den nåværende tilstanden du sender inn, er den 'siste versjonen'.

Når du vil sette en tilstand basert på en annen verdi, uten å avhenge av tidligere tilstand, kan du sette tilstanden direkte uten å bruke den funksjonelle oppdateringen.

Det er ganske godt forklart med eksempler i dokumentasjonen:

https://reactjs.org/docs/hooks-reference.html#usestate

dokumentasjonen inkluderer dette flotte eksempelet:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

Merk at i motsetning til setState i en klassekomponent, slår ikke useState sammen oppdateringer. Også fra dokumentasjonen:

I motsetning til setState-metoden som finnes i klassekomponenter, slår ikke useState automatisk sammen oppdateringsobjekter. Du kan replikere denne oppførselen ved å kombinere funksjonsoppdateringsformen med objekt spredningssyntaks:

const [state, setState] = useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Alternativ 2 vil fungere i de fleste tilfeller fordi du sjelden har en tilstandsendring som vises før en annen tilstandsendring, men det kan skje i mer komplekse tilfeller eller ved bruk av useEffect- eller setTimeout-funksjoner, og i dette tilfellet er funksjonell oppdatering obligatorisk.

Svar #2

De er i bunn og grunn de samme, men den andre tilnærmingen brukes når du ikke kan være sikker på at du har den oppdaterte verdien av tilstanden din tilgjengelig. For eksempel i en setTimeout- eller useEffect-callback

Relaterte artikler