Ich habe mir einen Pluralsight-Kurs über React angesehen und der Ausbilder erklärte, dass die Requisiten nicht gewechselt werden sollten. Ich lese jetzt einen Artikel (uberVU / React-Guide) über Requisiten gegen Staat und es heißt

Sowohl Requisiten als auch Statusänderungen lösen ein Render-Update aus.

Später im Artikel heißt es:

Requisiten (kurz für Eigenschaften) sind die Konfiguration einer Komponente und deren Optionen, wenn Sie möchten. Sie werden von oben empfangen und sind unveränderlich.

• Requisiten können sich also ändern, aber sie sollten unveränderlich sein?
• Wann sollten Sie Requisiten verwenden und wann sollten Sie state verwenden?
• Wenn Sie Daten haben, die eine React-Komponente benötigt, sollten diese über Requisiten weitergeleitet oder in der React-Komponente eingerichtet werden getInitialState?

Requisiten und Zustand hängen zusammen. Der Status einer Komponente wird häufig zu den Requisiten einer untergeordneten Komponente. Requisiten werden innerhalb der Rendermethode des übergeordneten Elements an das untergeordnete Element als zweites Argument an React.createElement()oder, wenn Sie JSX verwenden, an die bekannteren Tag-Attribute übergeben.

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

Der Statuswert des Elternteils von childsNamewird zum Wert des Kindes this.props.name. Aus der Sicht des Kindes ist der Name Prop unveränderlich. Wenn es geändert werden muss, sollte das übergeordnete Element nur seinen internen Status ändern:

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

und React wird es für Sie an das Kind weitergeben. Eine natürliche Folgefrage lautet: Was ist, wenn das Kind seinen Namen ändern muss? Dies erfolgt normalerweise über untergeordnete Ereignisse und übergeordnete Rückrufe. Das Kind kann beispielsweise ein Ereignis anzeigen, das aufgerufen wird onNameChanged. Das übergeordnete Element würde das Ereignis dann abonnieren, indem es einen Rückruf-Handler übergibt.

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

Das Kind würde seinen angeforderten neuen Namen als Argument an den Ereignisrückruf übergeben, indem es z. B. aufruft this.props.onNameChanged('New name'), und das Elternteil würde den Namen im Ereignishandler verwenden, um seinen Status zu aktualisieren.

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

Übergeben Sie für die Eltern-Kind-Kommunikation einfach Requisiten.

Verwenden Sie state , um die Daten, die Ihre aktuelle Seite benötigt, in Ihrer Controller-Ansicht zu speichern.

Verwenden Sie Requisiten , um Daten- und Ereignishandler an Ihre untergeordneten Komponenten weiterzugeben.

Diese Listen sollen Ihnen bei der Arbeit mit Daten in Ihren Komponenten helfen.

Requisiten

• sind unveränderlich
  • Dadurch kann React schnelle Referenzprüfungen durchführen
• werden verwendet, um Daten von Ihrem View-Controller weiterzugeben
  • Ihre Top-Level-Komponente
• bessere Leistung haben
  • Verwenden Sie diese Option, um Daten an untergeordnete Komponenten zu übergeben

Zustand

• sollte in Ihrem View-Controller verwaltet werden
  • Ihre Top-Level-Komponente
• ist veränderlich
• hat schlechtere Leistung
• sollte nicht von untergeordneten Komponenten aus aufgerufen werden
  • Gib es stattdessen mit Requisiten weiter

Für die Kommunikation zwischen zwei Komponenten, die keine Eltern-Kind-Beziehung haben, können Sie Ihr eigenes globales Ereignissystem einrichten. Abonnieren Sie Ereignisse in componentDidMount (), melden Sie sich in componentWillUnmount () ab und rufen Sie setState () auf, wenn Sie ein Ereignis erhalten. Das Flussmuster ist eine der möglichen Möglichkeiten, dies anzuordnen. - https://facebook.github.io/react/tips/communicate-between-components.html

Welche Komponenten sollten Status haben?

Die meisten Ihrer Komponenten sollten einfach einige Daten von Requisiten nehmen und rendern. Manchmal müssen Sie jedoch auf Benutzereingaben, eine Serveranforderung oder den Zeitablauf reagieren. Dafür verwenden Sie state.

Versuchen Sie, so viele Komponenten wie möglich zustandslos zu halten . Auf diese Weise isolieren Sie den Status an seinem logischsten Ort und minimieren die Redundanz, sodass Sie leichter über Ihre Anwendung nachdenken können.

Ein gängiges Muster besteht darin, mehrere zustandslose Komponenten zu erstellen , die nur Daten rendern, und über ihnen eine zustandsbehaftete Komponente in der Hierarchie zu haben, die ihren Status über Requisiten an ihre untergeordneten Komponenten weitergibt. Die statusbehaftete Komponente kapselt die gesamte Interaktionslogik, während die zustandslosen Komponenten dafür sorgen, dass Daten deklarativ gerendert werden. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Was soll in den Staat gehen?

Der Status sollte Daten enthalten, die die Ereignishandler einer Komponente möglicherweise ändern, um eine Aktualisierung der Benutzeroberfläche auszulösen. In realen Apps sind diese Daten in der Regel sehr klein und JSON-serialisierbar. Denken Sie beim Erstellen einer statusbehafteten Komponente an die minimal mögliche Darstellung ihres Status und speichern Sie diese Eigenschaften nur in this.state. Berechnen Sie in render () einfach alle anderen Informationen, die Sie basierend auf diesem Status benötigen. Sie werden feststellen, dass das Nachdenken und Schreiben von Anwendungen auf diese Weise in der Regel zur korrektesten Anwendung führt, da das Hinzufügen redundanter oder berechneter Werte zum Status bedeutet, dass Sie diese explizit synchron halten müssen, anstatt sich darauf zu verlassen, dass React sie für Sie berechnet. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Sie können es am besten verstehen, indem Sie es auf einfache JS-Funktionen beziehen.

Einfach gesagt,

Zustand ist der lokale Zustand des Bauteils , die nicht zugegriffen werden kann und außerhalb der Komponente modifiziert ist . Es entspricht lokalen Variablen in einer Funktion.

Einfache JS-Funktion

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

Komponente reagieren

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

Requisiten hingegen machen Komponenten wiederverwendbar, indem sie Komponenten die Möglichkeit geben, Daten von ihrer übergeordneten Komponente in Form von Requisiten zu empfangen. Sie entsprechen Funktionsparametern.

Einfache JS-Funktion

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

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

Komponente reagieren

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

}

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

Credits: Manoj Singh Negi

Artikel Link: React State vs Requisiten erklärt

Die Zusammenfassung von Requisiten und Status, die mir am besten gefällt, ist hier: React-Guide Big Hat Tipp an diese Jungs. Unten finden Sie eine bearbeitete Version dieser Seite:

Requisiten gegen Staat

tl; dr Wenn eine Komponente zu einem bestimmten Zeitpunkt eines ihrer Attribute ändern muss, sollte dieses Attribut Teil ihres Status sein, andernfalls sollte es nur eine Requisite für diese Komponente sein.

Requisiten

Requisiten (kurz für Eigenschaften) sind die Konfiguration einer Komponente. Sie werden von oben empfangen und sind für die Komponente, die sie empfängt, unveränderlich. Eine Komponente kann ihre Requisiten nicht ändern, ist jedoch dafür verantwortlich, die Requisiten ihrer untergeordneten Komponenten zusammenzustellen. Requisiten müssen nicht nur Daten sein - Rückruffunktionen können als Requisiten übergeben werden.

Zustand

Der Status ist eine Datenstruktur, die mit einem Standardwert beginnt, wenn eine Komponente bereitgestellt wird. Es kann im Laufe der Zeit mutiert sein, hauptsächlich aufgrund von Benutzerereignissen.

Eine Komponente verwaltet ihren eigenen Status intern. Abgesehen davon, dass es einen Anfangszustand festlegt, hat es nichts damit zu tun, mit dem Zustand seiner Kinder zu spielen. Sie können sich den Status als privat für diese Komponente vorstellen.

Requisiten und Zustand ändern

                                                   Requisiten Zustand
    Kann der Anfangswert von der übergeordneten Komponente abgerufen werden? Ja ja
    Kann von der übergeordneten Komponente geändert werden? ja Nein
    Können Standardwerte in Component festgelegt werden? * Ja Ja
    Kann sich innerhalb der Komponente ändern? Nein Ja
    Kann der Anfangswert für untergeordnete Komponenten festgelegt werden? Ja ja
    Kann sich untergeordnete Komponenten ändern? ja Nein

• Beachten Sie, dass sowohl Requisiten als auch Statusanfangswerte, die von Eltern erhalten wurden, die in einer Komponente definierten Standardwerte überschreiben.

Sollte diese Komponente einen Status haben?

Der Status ist optional. Da der Zustand die Komplexität erhöht und die Vorhersagbarkeit verringert, ist eine Komponente ohne Zustand vorzuziehen. Auch wenn Sie in einer interaktiven App eindeutig nicht auf den Status verzichten können, sollten Sie vermeiden, zu viele Stateful Components zu haben.

Komponententypen

Zustandslose Komponente Nur Requisiten, kein Status. Außer der Funktion render () ist nicht viel los. Ihre Logik dreht sich um die Requisiten, die sie erhalten. Dies macht es sehr einfach, ihnen zu folgen und sie zu testen.

Stateful Component Sowohl Requisiten als auch State. Diese werden verwendet, wenn Ihre Komponente einen bestimmten Status beibehalten muss. Dies ist ein guter Ort für die Client-Server-Kommunikation (XHR, Web-Sockets usw.), die Verarbeitung von Daten und die Reaktion auf Benutzerereignisse. Diese Art von Logistik sollte in einer moderaten Anzahl von Stateful Components zusammengefasst sein, während die gesamte Visualisierungs- und Formatierungslogik in viele Stateless Components nachgeschaltet werden sollte.

Quellen

• Frage zu "Requisiten" und "Status" - Google Groups
• In Reaktion denken: Identifizieren Sie, wo Ihr Staat leben soll

Requisiten (kurz für "Eigenschaften") und Status sind einfache JavaScript-Objekte. Während beide Informationen enthalten, die die Ausgabe von Render beeinflussen, unterscheiden sie sich in einer wichtigen Hinsicht: Requisiten werden an die Komponente übergeben (ähnlich wie Funktionsparameter), während der Status innerhalb der Komponente verwaltet wird (ähnlich wie bei Variablen, die innerhalb einer Funktion deklariert wurden).

Der Status ist also einfach auf Ihre aktuelle Komponente beschränkt, aber Requisiten können an jede gewünschte Komponente übergeben werden ... Sie können den Status der aktuellen Komponente als Requisite an andere Komponenten übergeben ...

Auch in React haben wir zustandslose Komponenten, die nur Requisiten und keinen internen Zustand haben ...

Das folgende Beispiel zeigt, wie sie in Ihrer App funktionieren:

Übergeordnet (zustandsreiche Komponente):

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>
    );
  }
}

Kind (zustandslose Komponente):

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

Der Hauptunterschied zwischen Requisiten und Status besteht darin, dass der Status intern ist und von der Komponente selbst gesteuert wird, während die Requisiten extern sind und von dem gesteuert werden, was die Komponente darstellt.

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"));

• Status kann geändert werden (veränderlich)
• Während Requisiten nicht können (unveränderlich)

Grundsätzlich besteht der Unterschied darin, dass der Status so etwas wie Attribute in OOP ist : Es ist etwas Lokales für eine Klasse (Komponente), das zur besseren Beschreibung verwendet wird. Requisiten sind wie Parameter - sie bestehen auf eine Komponente von dem Anrufer einer Komponente (die Eltern): als ob Sie eine Funktion mit bestimmten Parametern aufgerufen.

Sowohl der Status als auch die reagierenden Requisiten werden verwendet, um Daten in eine Komponente zu steuern. Im Allgemeinen werden Requisiten von übergeordneten Komponenten festgelegt und an untergeordnete Komponenten übergeben und in der gesamten Komponente festgelegt. Für Daten, die sich ändern werden, müssen wir state verwenden. Und Requisiten sind unveränderlich, während Zustände veränderbar sind. Wenn Sie Requisiten ändern möchten, können Sie dies von der übergeordneten Komponente aus tun und dann an untergeordnete Komponenten übergeben.

wie ich bei der arbeit mit reagieren gelernt habe.

• Requisiten werden von einer Komponente verwendet , um Daten aus einer externen Umgebung abzurufen, dh einer anderen Komponente (rein, funktional oder Klasse) oder einer allgemeinen Klasse oder einem Javascript / Typoskript- Code

• Zustände werden verwendet , um die interne Umgebung einer Komponente zu verwalten, dh die Daten ändern sich innerhalb der Komponente

Requisiten: Requisiten sind nichts anderes als eine Eigenschaft der Komponente, und die Reaktionskomponente ist nichts anderes als eine Javascript-Funktion.

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

const element =;

Hier wird <Welcome name="Sara" />ein Objekt {name: 'Sara'} als Requisiten der Welcome-Komponente übergeben. Um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben, verwenden wir Requisiten. Requisiten sind unveränderlich. Während des Lebenszyklus einer Komponente sollten sich die Requisiten nicht ändern (als unveränderlich betrachten).

Status: Auf den Status kann nur innerhalb der Komponente zugegriffen werden. Um die Daten innerhalb der Komponente zu verfolgen, verwenden wir state. Wir können den Status durch setState ändern. Wenn wir den Zustand an das Kind weitergeben müssen, müssen wir ihn als Requisiten weitergeben.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

Zustand:

1. Zustände sind veränderlich.
2. Zustände, die den einzelnen Komponenten zugeordnet sind, können nicht von anderen Komponenten verwendet werden.
3. Zustände werden beim Komponenten-Mount initialisiert.
4. Zustände werden zum Rendern dynamischer Änderungen innerhalb einer Komponente verwendet.

Requisiten:

1. Requisiten sind unveränderlich.
2. Sie können Requisiten zwischen Komponenten übergeben.
3. Requisiten werden meistens zur Kommunikation zwischen Komponenten verwendet. Sie können direkt vom Elternteil zum Kind übergehen. Für den Übergang vom Kind zum Elternteil müssen Sie das Konzept des Aufhebens von Zuständen verwenden.

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

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

Grundsätzlich sind Requisiten und Status zwei Möglichkeiten, wie die Komponente wissen kann, was und wie gerendert werden soll. Welcher Teil des Anwendungsstatus zum Status gehört und welcher zu einem Top-Level-Store, hängt mehr mit Ihrem App-Design zusammen als mit der Funktionsweise von React. Die einfachste Möglichkeit, IMO zu entscheiden, besteht darin, zu überlegen, ob dieses bestimmte Datenelement für die gesamte Anwendung nützlich ist oder ob es sich um lokale Informationen handelt. Es ist auch wichtig, den Status nicht zu duplizieren. Wenn also einige Daten aus Requisiten berechnet werden können, sollten sie aus Requisiten berechnet werden.

Angenommen, Sie haben ein Dropdown-Steuerelement (das die Standard-HTML-Auswahl für das benutzerdefinierte Styling umschließt), mit dem a) ein Wert aus der Liste ausgewählt und b) geöffnet oder geschlossen werden kann (dh die angezeigte oder ausgeblendete Optionsliste). Angenommen, Ihre App zeigt eine Liste mit Elementen an und Ihre Dropdown-Steuerelemente filtern nach Listeneinträgen. Dann ist es am besten, den aktiven Filterwert als Requisite zu übergeben und den geöffneten / geschlossenen Zustand lokal zu halten. Um es funktionsfähig zu machen, würden Sie außerdem einen onChange-Handler von der übergeordneten Komponente übergeben, der im Dropdown-Element aufgerufen wird, und aktualisierte Informationen (neu ausgewählter Filter) sofort an den Speicher senden. Andererseits kann der geöffnete / geschlossene Zustand in der Dropdown-Komponente beibehalten werden, da es dem Rest der Anwendung egal ist, ob das Steuerelement geöffnet ist, bis der Benutzer seinen Wert tatsächlich ändert.

Der folgende Code funktioniert nicht vollständig, er benötigt CSS und die Behandlung von Dropdown-Klick- / Unschärfe- / Änderungsereignissen, aber ich wollte das Beispiel minimal halten. Hoffe es hilft den Unterschied zu verstehen.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

Status ist die Art und Weise, wie Reag mit den Informationen Ihrer Komponente umgeht.

Angenommen, Sie haben eine Komponente, die einige Daten vom Server abrufen muss. Normalerweise möchten Sie den Benutzer informieren, wenn die Anforderung verarbeitet wird, wenn sie fehlgeschlagen ist usw. Dies ist eine Information, die nur für diese bestimmte Komponente relevant ist. Hier kommt der Staat ins Spiel.

Normalerweise lässt sich der Status am besten wie folgt definieren:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

Aber in den neuesten Implementierungen von React Native können Sie einfach Folgendes tun:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

Diese beiden Beispiele werden genauso ausgeführt, es handelt sich lediglich um eine Verbesserung der Syntax.

Was unterscheidet sich also davon, nur Objektattribute zu verwenden, wie wir es bei der OO-Programmierung immer getan haben? Normalerweise sind die in Ihrem Bundesstaat gespeicherten Informationen nicht statisch. Sie ändern sich im Laufe der Zeit und Ihre Ansicht muss aktualisiert werden, um diese Änderungen widerzuspiegeln. State bietet diese Funktionalität auf einfache Weise an.

Staat bedeutet, unveränderlich zu sein! und ich kann das nicht genug betonen. Was bedeutet das? Es bedeutet, dass Sie so etwas NIEMALS tun sollten.

 state.key2 = newValue;

Die richtige Vorgehensweise ist:

this.setState({ key2: newValue });

Wenn Sie this.setState verwenden, durchläuft Ihre Komponente den Aktualisierungszyklus. Wenn sich ein Teil des Status ändert, wird Ihre Komponenten-Rendermethode erneut aufgerufen, um diese Änderungen widerzuspiegeln.

Weitere ausführliche Erklärungen finden Sie in den Reaktionsdokumenten: https://facebook.github.io/react/docs/state-and-lifecycle.html

Requisiten sind einfach eine Abkürzung für Eigenschaften. Requisiten sind, wie Komponenten miteinander sprechen. Wenn Sie mit React überhaupt vertraut sind, sollten Sie wissen, dass Requisiten von der übergeordneten Komponente nach unten fließen.

Es gibt auch den Fall, dass Sie Standard-Requisiten haben können, so dass Requisiten festgelegt werden, auch wenn eine übergeordnete Komponente Requisiten nicht weitergibt.

Aus diesem Grund wird React als unidirektionaler Datenfluss bezeichnet. Dies erfordert ein wenig Zeit und ich werde wahrscheinlich später darüber bloggen, aber denken Sie vorerst daran: Daten fließen von Eltern zu Kindern. Requisiten sind unveränderlich (schickes Wort dafür ändert sich nicht)

Wir sind also glücklich. Komponenten erhalten Daten vom übergeordneten Element. Alles sortiert, richtig?

Nicht ganz. Was passiert, wenn eine Komponente Daten von einer anderen Person als der übergeordneten Komponente empfängt? Was ist, wenn der Benutzer Daten direkt in die Komponente eingibt?

Nun, deshalb haben wir Staat.

ZUSTAND

Requisiten sollten sich nicht ändern, also steigt der Status. Normalerweise haben Komponenten keinen Status und werden daher als zustandslos bezeichnet. Eine Komponente, die state verwendet, wird als stateful bezeichnet. Fühlen Sie sich frei, diesen kleinen Leckerbissen auf Partys fallen zu lassen und zu beobachten, wie sich Leute von Ihnen entfernen.

Der Status wird also verwendet, damit eine Komponente Informationen zwischen den von ihr ausgeführten Renderings verfolgen kann. Wenn Sie setState festlegen, wird das Statusobjekt aktualisiert und die Komponente erneut gerendert. Das ist super cool, denn das bedeutet, dass React sich um die harte Arbeit kümmert und unglaublich schnell ist.

Als kleines Beispiel für den Status finden Sie hier einen Ausschnitt aus einer Suchleiste (sehen Sie sich diesen Kurs an, wenn Sie mehr über React erfahren möchten.)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

ZUSAMMENFASSUNG

Requisiten und Staat machen ähnliche Dinge, werden aber auf unterschiedliche Weise verwendet. Die meisten Ihrer Komponenten sind wahrscheinlich zustandslos.

Requisiten werden verwendet, um Daten vom Elternteil zum Kind oder von der Komponente selbst zu übergeben. Sie sind unveränderlich und werden daher nicht verändert.

Der Status wird für veränderbare Daten oder Daten verwendet, die sich ändern. Dies ist besonders nützlich für Benutzereingaben. Denken Sie zum Beispiel an Suchleisten. Der Benutzer gibt Daten ein und aktualisiert, was er sieht.

Zusamenfassend.

Requisitenwerte können nicht geändert werden [unveränderlich]

Statuswerte können mit der setState-Methode [veränderlich] geändert werden.

state - Dies ist eine spezielle veränderbare Eigenschaft, die Komponentendaten enthält. Es hat den Standardwert, wenn Componet bereitgestellt wird.

Requisiten - Es handelt sich um eine besondere Eigenschaft, die von Natur aus unveränderlich ist und im Falle einer Wertübergabe vom Elternteil an das Kind verwendet wird. Requisiten sind nur ein Kommunikationskanal zwischen Komponenten, der sich immer von oben (übergeordnet) nach unten (untergeordnet) bewegt.

Im Folgenden finden Sie ein vollständiges Beispiel für die Kombination von Status und Requisiten: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ `taco-${ index }` }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

Im Allgemeinen ist der Status einer Komponente (übergeordnet) eine Stütze für die untergeordnete Komponente.

1. Der Status befindet sich in einer Komponente, in der Requisiten vom Elternteil an das Kind weitergegeben werden.

2. Requisiten sind im Allgemeinen unveränderlich.

   class Parent extends React.Component {
       constructor() {
           super();
           this.state = {
               name : "John",
           }
       }
       render() {
           return (
               <Child name={this.state.name}>
           )
       }
   }
   
   class Child extends React.Component {
       constructor() {
           super();
       }
   
       render() {
           return(
               {this.props.name} 
           )
       }
   }

Im obigen Code haben wir eine übergeordnete Klasse (Parent), deren Status der Name ist, der als Requisite an die untergeordnete Komponente (untergeordnete Klasse) übergeben wird, und die untergeordnete Komponente rendert ihn mit {this.props.name}

Sie haben einige Daten, die von Benutzern irgendwo in der Anwendung eingegeben werden.

1. Die Komponente, in die die Daten eingegeben werden, sollte diese Daten in ihrem Zustand haben, da sie während der Dateneingabe bearbeitet und geändert werden müssen

2. An einer anderen Stelle in der Anwendung sollten die Daten als Requisiten an alle anderen Komponenten weitergegeben werden

Also ja, die Requisiten ändern sich, aber sie werden an der 'Quelle' geändert und fließen dann einfach von dort nach unten. Requisiten sind also im Kontext der Komponente, die sie empfängt, unveränderlich .

Beispielsweise würde ein Referenzdatenbildschirm, auf dem Benutzer eine Liste von Lieferanten bearbeiten, diesen Status verwalten. Dies würde dann dazu führen, dass die aktualisierten Daten in ReferenceDataState gespeichert werden, das eine Ebene unter AppState liegen könnte, und diese Lieferantenliste dann als Requisiten übergeben wird an alle Komponenten, die es verwenden mussten.

In React speichern die Status die Daten sowie die Requisiten. Der Unterschied zu letzterem besteht darin, dass die gespeicherten Daten durch unterschiedliche Änderungen geändert werden können. Dies sind nichts weiter als Objekte, die in flachem JavaScript geschrieben sind. Sie können also Daten oder Codes enthalten und die Informationen darstellen, die Sie modellieren möchten. Wenn Sie weitere Informationen benötigen, wird empfohlen, diese Veröffentlichungen zu lesen. Verwendung des Status in Reaktion und Verwendung von Requisiten in Reaktion

• Requisiten --- Sie können den Wert nicht ändern.
• Zustände --- Sie können den Wert in Ihrem Code ändern, er ist jedoch aktiv, wenn ein Rendering ausgeführt wird.

Einige Unterschiede zwischen "Zustand" und "Requisiten" reagieren.

Reagiert auf Steuerelemente und rendert DOM basierend auf dem Status. Es gibt zwei Arten von Komponentenzuständen: Requisiten sind der Status, der zwischen Komponenten übertragen wird, und der Status ist der interne Status von Komponenten. Requisiten werden für die Datenübertragung von der übergeordneten Komponente zur untergeordneten Komponente verwendet. Die Komponenten haben auch einen eigenen Status innerhalb: Status, der nur innerhalb der Komponente geändert werden kann.

Im Allgemeinen kann der Status einer bestimmten Komponente die Requisiten der untergeordneten Komponente sein. Requisiten werden an untergeordnete Komponenten übergeben, was in der Rendering-Methode der übergeordneten Komponente angegeben ist

Requisiten

• Requisiten werden verwendet, um Daten in der untergeordneten Komponente zu übergeben

• Requisiten ändern einen Wert außerhalb einer Komponente (untergeordnete Komponente)

Zustand

• Statusverwendung innerhalb einer Klassenkomponente

• Status Ändern Sie einen Wert innerhalb einer Komponente

• Wenn Sie die Seite rendern, rufen Sie setState auf, um das DOM zu aktualisieren (Seitenwert aktualisieren).

Der Staat spielt eine wichtige Rolle bei der Reaktion

Als Antwort auf die anfängliche Frage, ob Requisiten unveränderlich sind, sollen sie in Bezug auf die untergeordnete Komponente unveränderlich sein, sind jedoch im Elternteil veränderbar.

React Components verwenden den Status, um die internen Variablen zu LESEN / SCHREIBEN, die beispielsweise geändert / mutiert werden können:

this.setState({name: 'Lila'})

React Requisiten sind spezielle Objekte, mit denen Programmierer Variablen und Methoden von der übergeordneten Komponente in die untergeordnete Komponente übertragen können.

Es ist so etwas wie ein Fenster und Türen des Hauses. Requisiten sind auch unveränderlich. Untergeordnete Komponenten können sie nicht ändern / aktualisieren.

Es gibt einige Methoden, die beim Abhören helfen, wenn Requisiten von der übergeordneten Komponente geändert werden.

Dies ist mein aktueller Standpunkt bezüglich der Erklärung zwischen Staat und Requisiten

1. Der Status entspricht Ihrer lokalen Variablen in Ihrer Komponente. Sie können den Wert von state mithilfe von set state ändern. Sie können dann beispielsweise den Statuswert an Ihre untergeordnete Komponente übergeben.

2. Requisiten ist der Wert, der sich genau in Ihrem Redux-Geschäft befindet. Er stammt tatsächlich aus dem Status, der vom Reduzierer stammt. Ihre Komponente sollte mit Redux verbunden sein, um den Wert von Requisiten zu erhalten. Sie können Ihren Requisitenwert auch an Ihre untergeordnete Komponente übergeben

Eine einfache Erklärung lautet: STATE ist der lokale Status der Komponente, z. B. color = "blue" oder animation = true usw. Verwenden Sie this.setState, um den Status der Komponente zu ändern. Mit PROPS kommunizieren Komponenten miteinander (senden Daten von Eltern zu Kindern) und machen Komponenten wiederverwendbar.

Der Status ist Ihre Daten, ist veränderlich, Sie können alles tun, was Sie brauchen, Requisiten sind schreibgeschützte Daten. Wenn Sie Requisiten übergeben, haben Sie bereits mit Ihren Daten gearbeitet und Sie benötigen die untergeordnete Komponente, um sie zu rendern, oder wenn Ihre Requisiten eine sind Funktion u nenne es, um eine Aufgabe auszuführen

Der Staat ist der Ursprung der Wahrheit, in dem Ihre Daten leben. Man kann sagen, der Staat manifestiert sich über Requisiten.

Durch die Bereitstellung von Requisiten für Komponenten bleibt Ihre Benutzeroberfläche mit Ihren Daten synchron. Eine Komponente ist eigentlich nur eine Funktion, die Markup zurückgibt.

Bei gleichen Requisiten (Daten, die angezeigt werden sollen) wird immer das gleiche Markup erzeugt .

Die Requisiten sind also wie die Pipelines, die die Daten vom Ursprung zu den Funktionskomponenten transportieren.

Requisiten: Stellt schreibgeschützte Daten dar, die unveränderlich sind und auf Attribute der übergeordneten Komponente verweisen.

Status: Stellt veränderbare Daten dar, die sich letztendlich auf das auswirken, was auf der Seite gerendert und von der Komponente selbst intern verwaltet wird, und die Überstunden häufig aufgrund von Benutzereingaben ändern.

Der Hauptunterschied besteht darin, dass der Status für eine Komponente privat ist und nur innerhalb dieser Komponente geändert werden kann, während Requisiten nur statische Werte und Schlüssel für die untergeordnete Komponente sind, die über die übergeordnete Komponente übergeben werden und innerhalb der untergeordneten Komponente nicht geändert werden können