wake-up-neo.net

Was ist der Unterschied zwischen Staat und Requisiten in React?

Ich habe mir einen Pluralsight-Kurs über React angesehen und der Ausbilder sagte, dass Requisiten nicht geändert werden sollten. Ich lese jetzt einen Artikel (uberVU/Reaktions-Leitfaden) über Requisiten vs. Stand und es heißt es 

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

Später in dem Artikel heißt es:

Requisiten (Abkürzung für Eigenschaften) sind die Konfiguration einer Komponente, ihre Optionen, falls möglich. Sie werden von oben empfangen und unveränderlich.

  • Requisiten können sich also ändern, aber sie sollten unveränderlich sein.
  • Wann sollten Sie Requisiten verwenden und wann sollten Sie Status verwenden? 
  • Wenn Sie über Daten verfügen, die eine React-Komponente benötigt, sollte sie über Requisiten oder Setup in der React-Komponente über getInitialState übergeben werden?
360
skaterdav85

Requisiten und Zustand sind miteinander verbunden. Der Zustand einer Komponente wird häufig zu Requisiten einer untergeordneten Komponente. Requisiten werden innerhalb der Render-Methode des übergeordneten Objekts als untergeordnetes Argument an React.createElement() an das untergeordnete Objekt übergeben. Wenn Sie JSX verwenden, werden die bekannteren Tag-Attribute verwendet.

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

Der Statuswert des übergeordneten Elements childsName wird zum this.props.name des Kindes. Aus der Sicht des Kindes ist die Namensstütze 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 seine Namensstütze ändern muss? Dies geschieht normalerweise durch untergeordnete Ereignisse und übergeordnete Rückrufe. Das Kind kann ein Ereignis mit dem Namen onNameChanged verfügbar machen. Das übergeordnete Element würde das Ereignis dann abonnieren, indem ein Callback-Handler übergeben wird.

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

Das untergeordnete Element würde den angeforderten neuen Namen als Argument an den Ereignisrückruf übergeben, indem es beispielsweise this.props.onNameChanged('New name') aufgerufen wird, und der übergeordnete Benutzer würde den Namen im Ereignisbehandlungsprogramm verwenden, um seinen Status zu aktualisieren.

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

Für die Kommunikation zwischen Eltern und Kindern müssen Sie einfach Requisiten übergeben.

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

Verwenden Sie props, um Daten- und Ereignishandler an Ihre untergeordneten Komponenten zu übergeben. 

Diese Listen sollten Sie bei der Arbeit mit Daten in Ihren Komponenten unterstützen. 

Requisiten

  • sind unveränderlich
    • dadurch kann React schnelle Referenzprüfungen durchführen
  • werden verwendet, um Daten von Ihrem View-Controller nach unten weiterzuleiten
    • ihre oberste Komponente
  • haben eine bessere Leistung
    • verwenden Sie dies, um Daten an untergeordnete Komponenten zu übergeben

Zustand

  • sollte in Ihrem View-Controller verwaltet werden
    • ihre oberste Komponente
  • ist veränderlich
  • hat eine schlechtere Leistung
  • sollte nicht von untergeordneten Komponenten aus zugegriffen werden
    • Übergeben Sie es stattdessen mit Requisiten

Für die Kommunikation zwischen zwei Komponenten, die kein .__ haben. Eltern-Kind-Beziehung können Sie Ihr eigenes globales Ereignis einrichten System. Ereignisse in componentDidMount () abonnieren, in .__ abbestellen. componentWillUnmount () und rufen Sie setState () auf, wenn Sie ein Ereignis erhalten . Das Flussmuster ist eine der Möglichkeiten, dies zu arrangieren. - https://facebook.github.io/react/tips/communicate-between-components.html

Welche Komponenten sollten Zustand haben?

Die meisten Ihrer Komponenten sollten lediglich einige Daten von Requisiten und mach es. Manchmal müssen Sie jedoch auf die Benutzereingaben a .__ reagieren. Serveranfrage oder Zeitablauf. Dafür verwenden Sie State.

Versuchen Sie, möglichst viele Ihrer Komponenten stateless aufzubewahren. Indem Dadurch isolieren Sie den Status an seinem logischsten Ort und minimieren Redundanz, so dass Sie leichter über Ihre Anwendung nachdenken können.

Ein übliches Muster besteht darin, mehrere stateless -Komponenten zu erstellen, die nur rendern Sie Daten und weisen Sie in der Hierarchie eine stateful-Komponente auf das gibt seinen Staat über Requisiten an seine Kinder weiter. Der stateful Die Komponente kapselt die gesamte Interaktionslogik, während die Zustandslose Komponenten sorgen für die deklarative Darstellung von Daten . - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Was soll in Staat gehen?

State sollte Daten enthalten, die die Event-Handler einer Komponente ändern können um ein UI-Update auszulösen. In echten Apps sind diese Daten in der Regel sehr klein und JSON-serialisierbar. Denken Sie beim Erstellen einer stateful-Komponente an die minimal mögliche Darstellung seines Zustands, und speichern Sie nur diese Eigenschaften in diesem Zustand. Berechnen Sie innerhalb von render () einfach alle anderen Informationen, die Sie benötigen, basierend auf diesem Status. Sie werden dieses Denken finden. Anwendungen zu schreiben und Anwendungen auf diese Weise zu schreiben, neigt dazu, am meisten zu führen korrekte Anwendung, da redundante oder berechnete Werte zu .__ hinzugefügt werden. state bedeutet, dass Sie sie explizit synchron halten müssen, statt Verlassen Sie sich darauf, dass React sie für Sie berechnet. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

171
BentOnCoding

Die Zusammenstellung von Requisiten und Status, die mir am besten gefällt, ist hier: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Der große Hut-Tipp für die Jungs. Unten ist 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 des 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, sie ist jedoch dafür verantwortlich, die Requisiten ihrer untergeordneten Komponenten zusammenzustellen. Requisiten müssen nicht nur Daten sein - Callback-Funktionen können als Requisiten übergeben werden.

zustand

Der Zustand ist eine Datenstruktur, die mit einem Standardwert beginnt, wenn eine Komponente bereitgestellt wird. Es kann im Laufe der Zeit mutiert sein, meistens infolge von Benutzerereignissen.

Eine Komponente verwaltet ihren eigenen Zustand intern. Abgesehen davon, dass es einen Anfangszustand setzt, hat es kein Geschäft, das mit dem Zustand seiner Kinder herumfummelt. Sie können den Status für diese Komponente als privat definieren.

Requisiten und Zustand ändern

 Requisiten Zustand 
 Kann Anfangswert von der übergeordneten Komponente abrufen? Ja ja
 Kann von der übergeordneten Komponente geändert werden? Ja Nein
 Kann Standardwerte in Component einstellen? * Ja Ja 
 Kann sich innerhalb einer Komponente ändern? Nein Ja
 Kann Anfangswert für untergeordnete Komponenten festlegen? Ja ja
 Kann sich in untergeordneten Komponenten ändern? Ja Nein
  • Beachten Sie, dass sowohl die von Eltern übermittelten Requisiten als auch die ursprünglichen Anfangswerte die in einer Komponente definierten Standardwerte überschreiben.

Sollte diese Komponente einen Zustand haben?

Zustand 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 auf Status verzichten können, sollten Sie vermeiden, zu viele Stateful-Komponenten zu haben.

Komponententypen

Stateless Component Nur Requisiten, kein Zustand. Neben der Funktion render () ist nicht viel los. Ihre Logik dreht sich um die Requisiten, die sie erhalten. Dies macht sie sehr leicht zu folgen und zu testen.

Stateful Component Requisiten und Status. 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-Komponenten enthalten sein, während die gesamte Visualisierungs- und Formatierungslogik stromabwärts in viele zustandslose Komponenten verschoben werden sollte.

quellen

38
broc.seib

Die meisten Antworten sind eher verwirrend für Anfänger. Es ist sehr schwer zu __. beziehen und verstehen Sie können es verstehen, indem Sie es mit Plain in Beziehung setzen JS.

In einfachen Worten

State bezieht sich auf den lokalen Status der Komponente, auf den außerhalb der Komponente nicht zugegriffen werden kann und der nur innerhalb der Komponente verwendet und geändert werden kann. 

Einfaches JS

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

React JS Equivalent

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

Props dagegen machen Komponenten wiederverwendbar, indem sie Komponenten die Möglichkeit geben, Daten von der übergeordneten Komponente in Form von Requisiten zu erhalten.

Einfaches JS

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

Reagieren Sie JS

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

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

Credits: https://medium.com/@manojsinghnegi

Article Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

19
mkarrfan

props (kurz für "Eigenschaften") und state sind beide reines JavaScript Objekte. Während beide Informationen enthalten, die die Ausgabe von .__ beeinflussen. rendern, sie unterscheiden sich in einer wichtigen Hinsicht: Requisiten werden an .__ übergeben. die Komponente (ähnlich Funktionsparametern), während state .__ ist. innerhalb der Komponente verwaltet (ähnlich wie in einer -Funktion deklarierte Variablen).

State beschränkt sich also auf Ihre aktuelle Komponente, aber props kann an jede gewünschte Komponente übergeben werden. Sie können state der aktuellen Komponente als prop an übergeben andere Komponenten...

Auch in React haben wir zustandslose Komponenten, die nur Requisiten und keine internen Zustände haben ...

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

Parent (state-full-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>
    );
  }
}

Child (zustandslose Komponente):

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

Grundsätzlich besteht der Unterschied darin, dass state so etwas wie Attribute in OOP ist: es ist etwas local für eine Klasse (Komponente), die zur besseren Beschreibung verwendet wird. Props sind wie Parameter - sie sind übergeben an eine Komponente vom Aufrufer einer Komponente (des übergeordneten Elements): als ob Sie eine Funktion mit bestimmter Funktion aufgerufen hätten Parameter.

4
Nesha Zoric

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

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

 State VS Props

  • Zustand kann geändert werden (veränderbar)
  • Während Requisiten nicht können (unveränderlich)
4
Aftab22

Beide Zustände von state und requis werden zum Steuern von Daten in einer Komponente verwendet. Im Allgemeinen werden Requisiten von übergeordneten Elementen festgelegt und an untergeordnete Komponenten übergeben, und sie werden in der gesamten Komponente festgelegt. Für Daten, die geändert werden sollen, müssen wir state verwenden. Und Requisiten sind unveränderlich , während Zustände veränderlich sind , wenn Sie Requisiten ändern möchten, die Sie von der übergeordneten Komponente ausführen können, und diese dann an untergeordnete Komponenten übergeben.

3
Vivek Mehta

Requisiten sind einfach eine Abkürzung für Eigenschaften. Requisiten sind, wie Komponenten miteinander kommunizieren. 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 auch dann gesetzt werden, wenn eine übergeordnete Komponente Requisiten nicht weitergibt.

Aus diesem Grund bezeichnen die Leute von React einen unidirektionalen Datenfluss. Dies erfordert ein wenig Kopfzerbrechen und ich werde wahrscheinlich später darüber bloggen, aber für den Moment, denken Sie daran: Daten fließen von Eltern zu Kindern. Requisiten sind unveränderlich (schickes Wort dafür, dass es sich nicht ändert)

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 dem übergeordneten Element erhält? Was ist, wenn der Benutzer Daten direkt in die Komponente eingibt?

Nun, deshalb haben wir den Staat.

ZUSTAND

Requisiten sollten sich nicht ändern. Normalerweise haben Komponenten keinen Zustand 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 zu werfen und zu beobachten, wie die Leute Edge von Ihnen weg sind.

State wird also verwendet, damit eine Komponente Informationen zwischen den von ihnen verwendeten Renderings nachverfolgen kann. Wenn Sie setState setzen, wird das Statusobjekt aktualisiert und die Komponente wird dann erneut gerendert. Das ist super cool, denn das bedeutet, React erledigt die harte Arbeit und ist unglaublich schnell.

Als ein kleines Beispiel für den Zustand ist hier ein Ausschnitt aus einer Suchleiste (einen Besuch wert, 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 Staaten machen ähnliche Dinge, werden aber auf unterschiedliche Weise verwendet. Die Mehrheit Ihrer Komponenten wird wahrscheinlich zustandslos sein.

Requisiten werden verwendet, um Daten von einem Elternteil an ein Kind oder von der Komponente selbst zu übergeben. Sie sind unveränderlich und werden daher nicht geändert.

State wird für veränderliche 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 dies aktualisiert das, was er sieht.

2
AJEET SINGH

Zusamenfassend.

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

zustandswerte können mit der setState-Methode [veränderbar] geändert werden

2
Amruth LS

Requisiten: Requisiten sind nichts anderes als Eigentum der Komponente und reagieren Komponente ist nichts anderes als eine Javascript-Funktion.

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

const Element =;

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

State: Der Status ist nur innerhalb von Component verfügbar. Um die Daten innerhalb der Komponente zu verfolgen, verwenden wir state. Wir können den Status mit setState ändern. Wenn wir dem Staat den Staat übergeben müssen, müssen wir ihn als Requisiten übergeben.

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>);
  }
}
2
Poulima Biswas

Zustand:

  1. zustände sind veränderbar.
  2. den einzelnen Komponenten sind Zustände zugeordnet, die nicht von anderen Komponenten verwendet werden können.
  3. zustände werden bei der Komponentenmontage 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 für die Kommunikation zwischen Komponenten verwendet. Sie können direkt vom Elternteil zum Kind wechseln. Um vom Kind zum Elternteil überzugehen, benötigen Sie ein Konzept zum Anheben von Zuständen.

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

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

1
Akanksha gore

Zustand ist die Art und Weise, wie reagieren die Informationen, die Ihre Komponente enthält. 

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 die Anforderung fehlgeschlagen ist usw. Dies ist eine Information, die nur für diese bestimmte Komponente relevant ist. Hier tritt der Staat ins Spiel ein.

Normalerweise definieren Sie den Zustand am besten wie folgt:

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

aber in den spätesten Implementierungen von reagieren native können Sie einfach tun:

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

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

Was ist also anders, als nur Objektattribute zu verwenden, wie wir es immer bei OO Programmierung haben? Normalerweise sind die Informationen in Ihrem Status nicht statisch, sie ändern sich mit der Zeit, und Ihre Ansicht muss aktualisiert werden, um diese Änderungen widerzuspiegeln. State bietet diese Funktionalität auf einfache Weise an.

State IS MUSS UNGLAUBLICH SEIN! und ich kann das nicht genug betonen. Was bedeutet das? Es bedeutet, dass Sie so etwas NIE tun sollten.

 state.key2 = newValue;

Der richtige Weg, dies zu tun, ist:

this.setState({ key2: newValue });

Mit this.setState durchläuft Ihre Komponente den Aktualisierungszyklus. Wenn sich ein Teil des Status ändert, wird Ihre Component-Render-Methode erneut aufgerufen, um diese Änderungen widerzuspiegeln.

In den Antwortdokumenten finden Sie eine noch ausführlichere Erklärung: https://facebook.github.io/react/docs/state-and-lifecycle.html

1
EnriqueDev

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 state haben, da sie bei der Dateneingabe bearbeitet und geändert werden muss

  2. an anderer Stelle in der Anwendung sollten die Daten als props an alle anderen Komponenten weitergegeben werden

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 unveränderlich im Zusammenhang mit der Komponente, die sie empfängt

Z.B. Ein Referenzdatenbildschirm, auf dem Benutzer eine Liste von Anbietern bearbeiten, verwaltet diesen Status. Die Aktion würde dann dazu führen, dass die aktualisierten Daten in ReferenceDataState gespeichert werden. Dies könnte eine Ebene unterhalb von AppState liegen. Diese Lieferantenliste wird dann als Requisite an Requisiten übergeben alle Komponenten, die dazu benötigt wurden. 

1
user3775501

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

Reagieren Sie auf Steuerelemente und rendern Sie DOM basierend auf dem Status. Es gibt zwei Arten von Komponentenzuständen: Requisiten ist der Zustand, der zwischen Komponenten übertragen wird, und der Zustand ist der interne Zustand 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 könnte 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

1
Naqibullah

In React speichern die Zustände die Daten sowie die Requisiten. Der Unterschied zu letzteren ist, dass die gespeicherten Daten durch verschiedene Änderungen geändert werden können. Dies sind nicht mehr 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 anzuzeigen Verwendung des Staates in Reaktion und Verwendung von Requisiten in Reaktion

1

state - Es ist eine spezielle veränderliche Eigenschaft, die Komponentendaten enthält. Es hat einen Standardwert, wenn Componet gemountet wird. 

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

unten sind vollständige Beispiele für die Kombination des Staates und der Requisiten: -  

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

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/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>
1
Ajay

Im Wesentlichen sind Requisiten und Status zwei Möglichkeiten, mit denen die Komponente wissen kann, was und wie dargestellt werden soll. Welcher Teil des Anwendungsstatus zum Status gehört und welcher zu einem Top-Level-Store, hat mehr mit Ihrem App-Design zu tun als mit der Funktionsweise von React. Der einfachste Weg, um zu entscheiden, IMO, ist zu überlegen, ob diese Daten für die Anwendung als Ganzes nützlich sind oder ob es sich um lokale Informationen handelt. Es ist auch wichtig, den Zustand nicht zu duplizieren. Wenn also Daten aus Requisiten berechnet werden können, sollten sie aus Requisiten berechnet werden.

Angenommen, Sie verfügen über ein Dropdown-Steuerelement (das Standard-HTML-Auswahl für benutzerdefiniertes Styling einhüllt), das a) einen Wert aus der Liste auswählen kann und b) geöffnet oder geschlossen werden kann (dh die Optionsliste wird angezeigt oder ausgeblendet) Nehmen wir an, Ihre App zeigt eine Liste von Elementen an, und Ihre Dropdown-Steuerelemente filtern nach Listeneinträgen. Dann ist es am besten, den aktiven Filterwert als Requisite zu übergeben und den Status "Geschlossen/Geschlossen" lokal zu halten. Damit es funktionsfähig ist, übergeben Sie einen onChange-Handler von der übergeordneten Komponente, der innerhalb des Dropdown-Elements aufgerufen wird und aktualisierte Informationen (neuer ausgewählter Filter) sofort an den Speicher sendet. Andererseits kann der geöffnete/geschlossene Zustand innerhalb der Dropdown-Komponente beibehalten werden, da es dem Rest der Anwendung nicht wirklich wichtig ist, ob das Steuerelement geöffnet ist, bis der Benutzer seinen Wert tatsächlich ändert. 

Der folgende Code ist nicht vollständig funktionsfähig, er benötigt css und die Bearbeitung von Dropdown-Ereignissen zum Anklicken/Verwischen/Ändern, aber ich wollte, dass das Beispiel minimal bleibt. 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')
);
1
Alex.Me

React Components verwenden state zum LESEN/SCHREIBEN der internen Variablen, die geändert/mutiert werden können, zum Beispiel durch:

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

React Requisiten ist ein spezielles Objekt, mit dem 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. Child Component kann sie nicht ändern/aktualisieren.

Es gibt einige Methoden, die beim Abhören helfen, wenn Requisiten von Parent Component geändert werden.

0
Todd Bauman

React Components verwendet state zum READ/WRITE der internen Variablen, die beispielsweise geändert/mutiert werden können:

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

Requisiten reagieren ist ein spezielles Objekt, mit dem der Programmierer Variablen und Methoden von der übergeordneten Komponente in die untergeordnete Komponente laden kann.

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

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

0
Juraj Sarissky

In Beantwortung der ersten Frage, dass die Requisiten unveränderlich sind, werden sie als unveränderlich bezeichnet für die untergeordnete Komponente, jedoch für die übergeordnete Komponente änderbar. 

0
Lucy Mac

Dies ist meine aktuelle Sichtweise bezüglich der Erklärung zwischen Staat und Requisiten

  1. Der Zustand ist wie Ihre lokale Variable in Ihrer Komponente. Sie können den Wert des Status mit dem Status set. Ändern. Sie können dann beispielsweise den Wert von state an Ihre untergeordnete Komponente übergeben.

  2. Requisiten ist der Wert, der sich genau in Ihrem Redux-Store befindet. Dieses .__ stammt aus einem Zustand, der von einem Reduzierer stammt. Ihre Komponente Sollte mit redux verbunden sein, um den Wert von Requisiten zu erhalten. Sie können auch Ihren Requisitenwert an Ihre untergeordnete Komponente übergeben

0
Faris Rayhan

Requisiten: repräsentiert schreibgeschützte Daten, die unveränderlich sind und sich auf Attribute der übergeordneten Komponente beziehen.

State: steht für veränderliche Daten, die letztendlich beeinflussen, was auf der Seite gerendert und von der Komponente selbst verwaltet wird. 

0
T.akanda
  • Requisiten --- Sie können den Wert nicht ändern.
  • states --- Sie können den Wert in Ihrem Code ändern, er wäre jedoch aktiv, wenn ein Rendering ausgeführt wird.
0
Changyuan Chen

Der Status befindet sich in einer Komponente, in der Requisiten von einem Elternteil an ein Kind übergeben werden. 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) mit dem Status name, der als Requisite an die untergeordnete Komponente (Child class) übergeben wird, und die untergeordnete Komponente rendert sie mit {this.props.name}.

0
Teodor Malinas

Im Allgemeinen ist der Status einer Komponente (übergeordnetes Element) prop für die untergeordnete Komponente.

  1. Der Status befindet sich in einer Komponente, bei der Requisiten vom übergeordneten an das __.-Kind übergeben 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 Name den Status hat, der als untergeordnete Komponente an die untergeordnete Komponente (untergeordnete Klasse) übergeben wird.

0
Abhijit

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

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

Wenn dieselben Requisiten (Daten für die Anzeige) sind, wird immer das gleiche Markup erzeugt.

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

0
Bar Horing

Zustand ist Ihre Daten, ist veränderbar, Sie können alles tun, was Sie benötigen, Requisiten sind schreibgeschützt. Normalerweise, wenn Sie Requisiten übergeben, die Sie bereits mit Ihren Daten gearbeitet haben, und Sie benötigen die untergeordnete Komponente, um sie wiederzugeben, oder wenn Ihre Requisiten eine sind Funktion u rufen Sie auf, um eine Aufgabe auszuführen

0
Aneudy Adames

Von: Andrea Chiarelli Buch "Beginning React: Vereinfachen Sie Ihren Frontend-Entwicklungsworkflow und verbessern Sie die Benutzerfreundlichkeit Ihrer Anwendungen mit React":

Jede React Komponente hat eine Requisiten Eigenschaft. Mit dieser Eigenschaft werden Daten erfasst, die an die Komponente selbst übergeben werden.JSX-Attribut ist an ein React -Element angehängt, eine Eigenschaft mit demselben Namen ist an das props -Objekt angehängt. So können wir über die angehängte Eigenschaft auf die übergebenen Daten zugreifen. Darüber hinaus ermöglicht die Unveränderlichkeit von Requisiten , dass wir uns Komponenten als reine Funktionen vorstellen, die keine Nebenwirkungen haben (da sie ihre Eingabedaten nicht ändern). Wir können uns Daten, die von einer Komponente zu einer anderen übertragen werden, als einen unidirektionalen Datenfluss von der übergeordneten Komponente zu den untergeordneten Komponenten vorstellen. Dies gibt uns ein besser kontrollierbares System.

React bietet einen Mechanismus zur Unterstützung des automatischen Renderns einer Komponente, wenn sich Daten ändern. Ein solcher Mechanismus basiert auf dem Konzept von state . React state ist eine Eigenschaft, die Daten darstellt, die sich mit der Zeit ändern. Jede Komponente unterstützt die Eigenschaft state , sollte jedoch sorgfältig verwendet werden. Komponenten, die Daten speichern, die sich im Laufe der Zeit ändern können, werden als zustandsbehaftete Komponenten bezeichnet. Eine stateful-Komponente speichert den state in der this.state -Eigenschaft. Um einer Komponente mitzuteilen, dass sich der Status geändert hat, müssen Sie die Methode setState () verwenden. State Initialisierung ist der einzige Fall, in dem Sie der this.state - Eigenschaft einen Wert zuweisen können, ohne setState () zu verwenden.

setState () verschmilzt neue Daten mit alten Daten, die bereits im Status enthalten sind, und überschreibt den vorherigen Status. setState () löst die Ausführung der render () -Methode aus, sodass Sie niemals aufrufen sollten render () explizit

0
H S Progr

Eine einfache Erklärung ist: STATE ist der lokale Zustand der Komponente, zum Beispiel color = "blue" oder animation = true etc. Verwenden Sie this.setState, um den Status der Komponente zu ändern. PROPS ist die Art und Weise, wie Komponenten miteinander kommunizieren (Daten von Eltern zu Kind senden) und Komponenten wiederverwendbar machen.

0
ASHISH BHARDWAJ