javascript - Hva er forskjellen på state og props i React?

Jeg så på et Pluralsight-kurs om React, og instruktøren sa at props ikke bør endres. Jeg leser nå en artikkel (uberVU/react-guide) om props vs. state, og den sier

Både props og endringer i state utløser en oppdatering av renderingen.

Senere i artikkelen står det:

Props (kort for egenskaper) er en Komponents konfigurasjon, dens valg om du vil. De mottas ovenfra og er uforanderlige.

  • Så props kan endres, men de bør være uforanderlige?
  • Når bør du bruke props og når bør du bruke state?
  • Hvis du har data som en React-komponent trenger, bør de sendes gjennom props eller settes opp i React-komponenten via getInitialState?

Svar #1

Props og state er relaterte. Tilstanden til en komponent vil ofte bli props for en underordnet komponent. Props sendes til barnet innenfor render-metoden til forelderen som det andre argumentet til React.createElement() eller, hvis du bruker JSX, de mer kjente attributtene på taggen.

<MyChild name={this.state.childsName} />

Forelderens tilstandsverdi av childsName blir barnets this.props.name. Fra barnets perspektiv er navne-propen uforanderlig. Hvis den trenger å endres, bør forelderen bare endre sin interne tilstand:

this.setState({ childsName: 'New name' });

og React vil videreformidle det til barnet for deg. Et naturlig oppfølgingsspørsmål er: hva om barnet trenger å endre sin name-prop? Dette gjøres vanligvis gjennom barnehendelser og foreldrekallbaker. Barnet kan eksponere en hendelse kalt, for eksempel, onNameChanged. Forelderen vil da abonnere på hendelsen ved å sende inn en callback-handler.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

Barnet ville sende sitt forespurte nye navn som et argument til hendelseskallbaken ved å kalle, for eksempel, this.props.onNameChanged('Nytt navn'), og forelderen ville bruke navnet i hendelseshåndtereren for å oppdatere sin tilstand.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

Svar #2

For kommunikasjon mellom foreldre og barn, bare send props.

Bruk state for å lagre dataene din nåværende side trenger i din controller-visning.

Bruk props for å sende data og hendelsesbehandlere ned til dine barnekomponenter.

Disse listene bør hjelpe deg med å veilede når du arbeider med data i komponentene dine.

Rekvisitter

  • er uforanderlige

    • som lar React gjøre raske referansekontroller

  • blir brukt til å overføre data ned fra din visningskontroller

    • din toppnivåkomponent

  • ha bedre ytelse

    • bruk dette for å sende data til underkomponenter

Stat

  • bør administreres i din visningskontroller

    • din toppnivåkomponent
  • er muterbar
  • har dårligere ytelse

  • bør ikke aksesseres fra barnekomponenter

    • gi det videre med props i stedet

For kommunikasjon mellom to komponenter som ikke har et foreldre-barn-forhold, kan du sette opp ditt eget globale hendelsessystem. Abonner på hendelser i componentDidMount(), avslutt abonnement i componentWillUnmount(), og kall setState() når du mottar en hendelse. Flux-mønsteret er en av de mulige måtene å organisere dette på. - https://facebook.github.io/react/tips/communicate-between-components.html

Hvilke komponenter bør ha tilstand?

De fleste av komponentene dine bør ganske enkelt ta noen data fra props og gjengi dem. Imidlertid må du noen ganger svare på brukerinput, en serverforespørsel eller tidsforløp. For dette bruker du state.

Prøv å holde så mange av komponentene dine som mulig stateless. Ved å gjøre dette vil du isolere tilstanden til det mest logiske stedet og minimere overflødighet, noe som gjør det lettere å resonnere rundt applikasjonen din.

Et vanlig mønster er å lage flere stateless komponenter som bare gjengir data, og ha en stateful komponent over dem i hierarkiet som sender sin tilstand til barna via props. Den stateful komponenten innkapsler all interaksjonslogikk, mens de stateless komponentene tar seg av å gjengi data på en deklarativ måte. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Hva bør gå i stat?

State bør inneholde data som en komponents hendelsesbehandlere kan endre for å utløse en UI-oppdatering. I ekte apper har denne dataen en tendens til å være veldig liten og JSON-serialiserbar. Når du bygger en stateful komponent, tenk på den minimal mulige representasjonen av dens state, og lagre bare de egenskapene i this.state. Inne i render() beregner du enkelt annen informasjon du trenger basert på denne staten. Du vil oppdage at å tenke på og skrive applikasjoner på denne måten vanligvis fører til den mest korrekte applikasjonen, siden det å legge til overflødige eller beregnede verdier i state betyr at du må holde dem eksplisitt synkronisert i stedet for å stole på at React beregner dem for deg.\n\n- https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Svar #3

Du kan forstå det best ved å relatere det til vanlige JS-funksjoner.

Enkelt sagt,

State er den lokale tilstanden til komponenten som ikke kan aksesseres eller endres utenfor komponenten. Det tilsvarer lokale variabler i en funksjon.

Ren JS-funksjon

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

React-komponent

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

Props, derimot, gjør komponenter gjenbrukbare ved å gi komponenter muligheten til å motta data fra sin overordnede komponent i form av props. De tilsvarer funksjonsparametere.

Ren JS-funksjon

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

React-komponent

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}

// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

Kreditter: Manoj Singh Negi

Artikkellink: React State vs Props forklart

Svar #4

Oppsummeringen av props vs state som jeg liker best er her: react-guide Stor takk til de gutta. Nedenfor er en redigert versjon av den siden:

props vs state

tl;dr Hvis en Komponent trenger å endre en av sine attributter på et tidspunkt, bør den attributten være en del av dens tilstand, ellers bør den bare være en prop for den Komponent.

requisitter

Props (kort for egenskaper) er en Komponents konfigurasjon. De mottas ovenfra og er uforanderlige så langt Komponent som mottar dem er bekymret. En Komponent kan ikke endre sine props, men den er ansvarlig for å sette sammen propsene til sine underordnede Komponenter. Props trenger ikke bare være data - tilbakekallingsfunksjoner kan også sendes inn som props.

stat

Tilstanden er en datastruktur som starter med en standardverdi når en komponent monteres. Den kan endres over tid, hovedsakelig som et resultat av brukerhendelser.

En komponent håndterer sin egen tilstand internt. Bortsett fra å sette en initial tilstand, har den ingen grunn til å tukle med tilstanden til sine barn. Du kan se for deg at tilstand er privat for den komponenten.

Endre rekvisitter og tilstand

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No
  • Merk at både props og opprinnelige tilstander mottatt fra foreldre overstyrer standardverdier definert inne i en komponent.

Bør denne komponenten ha tilstand?

State er valgfritt. Siden state øker kompleksitet og reduserer forutsigbarhet, er en komponent uten state å foretrekke. Selv om du tydeligvis ikke kan klare deg uten state i en interaktiv app, bør du unngå å ha for mange Stateful-komponenter.

Komponenttyper

Stateless Component Bare props, ingen state. Det skjer ikke mye annet enn render()-funksjonen. Logikken deres dreier seg om propsene de mottar. Dette gjør dem veldig enkle å følge og å teste.

Statefull komponent Både props og state. Dette brukes når komponenten din må beholde noe state. Dette er et godt sted for klient-serverkommunikasjon (XHR, web sockets, osv.), behandling av data og respons på brukerhandlinger. Denne typen logistikk bør kapsles inn i et moderat antall stateful-komponenter, mens all visualiserings- og formateringslogikk bør flyttes nedover til mange stateless-komponenter.

kilder

  • Spørsmål om 'props' og 'state' - Google-grupper
  • Tenk i React: Identifiser hvor staten din bør ligge

Svar #5

Hovedforskjellen mellom props og state er at state er intern og kontrollert av komponenten selv, mens props er ekstern og kontrollert av det som rendrer komponenten.

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

  • Tilstand kan endres (Muterbar)
  • Mens Props ikke kan (Uforanderlig)

Svar #6

props (kort for «egenskaper») og state er begge vanlige JavaScript-objekter. Selv om begge inneholder informasjon som påvirker resultatet av render, er de forskjellige på en viktig måte: props blir sendt til komponenten (ligner på funksjonsparametere), mens state administreres innenfor komponenten (ligner på variabler deklarert innenfor en funksjon).

Så enkelt state er begrenset til din nåværende komponent, men props kan sendes til hvilken som helst komponent du ønsker... Du kan sende state til den nåværende komponenten som prop til andre komponenter...

Også i React har vi stateless components som bare har props og ikke intern tilstand...

Eksemplet nedenfor viser hvordan de fungerer i appen din:

Forelder (state-full komponent):

class SuperClock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
  }

  render() {
    return (
      <div>
        <Clock name={this.state.name} date={this.state.date} />
      </div>
    );
  }
}

Child (stateless komponent):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

Svar #7

I utgangspunktet er forskjellen at state er noe som ligner på attributter i OOP: det er noe lokalt for en klasse (komponent), brukt for å bedre beskrive den. Props er som parametere - de blir sendt til en komponent fra den som kaller komponenten (forelderen): som om du kalte en funksjon med visse parametere.

Relaterte artikler