Implementierungsmethode für den React State-Zustand und Lebenszyklus

1. Methoden zur Implementierung von Komponenten:

組件名稱首字母必須大寫

1. Implementieren Sie Komponenten über JS-Funktionen

<div id="app"></div>
<Skripttyp="text/babel">
  var ReactDiv = document.getElementById('app');
  Funktion GetReactComp(){
    return <p>Ich bin eine React-Komponente</p>
  }
  const hellocomp = < GetReactComp /> // Den ersten Buchstaben groß schreiben const reactSpan = (
    <span>
      { hallocomp }
    </span>
  )
  ReactDOM.render(reactSpan, ReactDiv)
</Skript>

2. Implementieren Sie Komponenten über die ES6-Klasse

<div id="Klasse"></div>
<Skripttyp="text/babel">
  var reactDiv1=document.getElementById('Klasse');
  //Klassenkomponente definieren class MyReactComp extends React.Component{
    machen(){
      zurückkehren (
        <h2>Klassenkomponenten</h2>
      )
    }
  }
  //Klassenkomponente verwenden const testDiv = (
    <div>{<MyReactComp/>}</div>
  )
	//ReactDOM.render einbinden(testDiv,reactDiv1)
</Skript>

2. Übertragung des Wertes der Requisitenkomponente

React verfügt über einen strengen Schutzmechanismus für Props. Sobald ein Wert angegeben ist,不允許被改變.

<div id="app"></div>
<Skripttyp="text/babel">
  var reactDiv = document.getElementById('app');
  Klasse ReactClassComp erweitert React.Component {
    machen(){
      zurückkehren (
      <div>
      <p>Benutzername: <input type="text" value={ this.props.name }/></p>
      <p>Geschlecht: <input type="text" value={ this.props.gender }/></p>
      </div>
      )
    }
  }

  ReactClassComp.defaultProps={
    Name:'Liu Bei',
    Geschlecht: männlich
  }
  Konstante reactp = (
    <span>
      {<ReactClassComp />}  
    </span>
  )
  ReactDOM.render(reagierendiv, reagierendiv)
</Skript> 

Hinweis: In vielen Fällen muss der Inhalt der Komponente entsprechend der Aktualisierung der Daten aktualisiert werden. Zu diesem Zeitpunkt müssen Sie den von React bereitgestellten Status verwenden.

3. Staat

• React betrachtet Komponenten als狀態機, interagiert mit Benutzern über intern definierte Zustände und Lebenszyklen, verwaltet unterschiedliche Zustände von Komponenten und stellt dann durch das Rendern der Benutzeroberfläche und Datenkonsistenz sicher.
• Erstellungsmethode: Mithilfe der ES6-Klassenvererbungsmethode super können Props an den React.Component-Konstruktor übergeben werden.

1. React-Lebenszyklus-Montage (Mount):

Wenn eine Komponenteninstanz erstellt und in das DOM eingefügt wird

(1) constructor(props) --> Bevor die Komponente gemountet wird, wird ihr Konstruktor aufgerufen. Wenn Sie Status- oder Bindungsmethoden nicht initialisieren müssen, müssen Sie keinen Konstruktor erstellen.

Konstruktoren werden nur in den folgenden zwei Fällen verwendet:

• Initialisieren Sie den internen Status, indem Sie diesem Status ein Objekt zuweisen.
• Binden einer Instanz an einen Event-Handler

Hinweis: Rufen Sie die Methode setState() nicht in der Funktion constructor() auf. Wenn Sie einen internen Status verwenden müssen, können Sie this.state direkt zuweisen, um den Status im Konstruktor zu initialisieren.

Konstruktor (Requisiten) {
	super(Requisiten);
		dieser.Zustand = {
			Datum: neues Datum()
		}
		dies.handleShow = dies.handleShow.bind(dies)
	
}

(2) render() --> muss implementiert sein

Es überprüft this.props und this.state auf Änderungen und gibt einen der folgenden Typen zurück:

• React-Elemente: normalerweise mit JSX erstellt
• Array oder Fragmente: gibt mehrere zurück
• Portale: können Knoten in verschiedene DOM-Teilbäume rendern
• Zeichenfolge oder numerischer Typ: wird als Textknoten gerendert
• Boolean oder null: nichts rendern

純函數: Gibt bei jedem Aufruf dasselbe Ergebnis zurück, ohne den Komponentenstatus zu ändern, und interagiert nicht direkt mit dem Browser.
Wenn Sie mit dem Browser interagieren müssen, definieren Sie es in ComponentDidMount() oder einem anderen Lebenszyklus

(3) ComponmentDidMount() -->Wird unmittelbar nach der Bereitstellung der Komponente aufgerufen.

• Hängt von der Initialisierung der DOM-Knoten ab
• Instanziieren Sie die Netzwerkanforderung, um Daten abzurufen
• Hinzufügen eines Abonnements und Abbestellens in componentWillUnmount()

Hinweis: Sie können setState() direkt in ComponentDidMount() aufrufen. Dadurch wird ein zusätzliches Rendering ausgelöst, das jedoch erfolgt, bevor der Browser den Bildschirm aktualisiert. Dadurch wird sichergestellt, dass der Benutzer den Zwischenzustand auch dann nicht sieht, wenn render() zweimal aufgerufen wird.

erneuern:

compomentDidUpdate(prevProps,prevProps,snapshot) : Wird unmittelbar nach dem Update aufgerufen. Beim ersten Rendering wird diese Methode nicht ausgeführt. Beim Update der Komponente kann hier am DOM gearbeitet werden.

KomponenteDidUpdate(prevProps){
	wenn(this.props.userID !== prevProps.userID){
		dies.fetchData(diese.props.userID)
	}
}

Hinweis: Wenn Sie setState() in compositionDidUpdate() aufrufen, müssen Sie es in eine bedingte Anweisung einschließen, da sonst eine Endlosschleife entsteht. Darüber hinaus wird ein zusätzliches erneutes Rendern erforderlich sein, das zwar für den Benutzer unsichtbar ist, sich jedoch auf die Leistung der Komponente auswirkt.

deinstallieren:

componentWillUnmount() -->Wird direkt aufgerufen, bevor eine Komponente deinstalliert und zerstört wird.
Hinweis: setState() sollte nicht in componentWillUnmount() aufgerufen werden, da die Komponente nie erneut gerendert wird. Sobald eine Komponenteninstanz ausgehängt wurde, kann sie nie wieder ausgehängt werden.

2. Lebenszyklusinstanz-->Uhr:

<div id="app"></div>
<Skripttyp="text/babel">
  var reactDiv = document.getElementById('app')
  //Definieren Sie die Klassenkomponente MyStateComp 
  Klasse MyStateComp erweitert React.Component {
    //Konstruktor Konstruktor(Requisiten) {
      super(Requisiten); 
      // Status intern initialisieren durch this.state this.state = {
        Datum: neues Datum(),
        anzeigen:false,
        Text: 'Anzeige'
      }
      //Binden Sie eine Instanz an die Ereignisbehandlungsfunktion this.handleShow = this.handleShow.bind(this)
    }
    //Abonnement hinzufügen componentDidMount() {
      this.timerID = setzeInterval(()=>this.tick(),1000)
    }
    //Zeitfunktion tick() {
      this.setState({ //setState aktualisiert den Status der Komponente
        Datum: neues Datum()
      })
    }
    //Instanz anzeigen, handleShow() ausblenden {
      dies.setState(state=>({
        anzeigen: !state.show,
        Text: !state.show?'Ausblenden':'Anzeigen'
      }))
    }
    //Komponentendeinstallation: Lösche den Timer componentWillUnmont() {
      Löschintervall (diese.Timer-ID)
    }
    
    rendern() {
      lass isShow = dieser.Zustand.show;
      Lass das Element;
      wenn(istAnzeigen){
        Element = <h2 >{this.state.date.toLocaleTimeString()}</h2> 
      }anders{
        Element = null
      }
      zurückkehren (
        <div>
          <button onClick={this.handleShow}>{this.state.text}Zeit</button>
          {Element}
        </div>
      )
    }
  }
  const reactSpan = (
    <span>
      {<MyStateComp/> }  
    </span>
  )
  ReactDOM.render(reactSpan, reactDiv)
</Skript> 

Dies ist das Ende dieses Artikels über React State und Lebenszyklus. Weitere relevante Inhalte zum Lebenszyklus von React State finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!