ReactJS this.state

Question

Ich versuche exmple von ReactJS zu verstehen:

class App extends Component { 

    constructor(props) { 
    super(props); 

    this.state = {date: new Date()}; 
    this.date = new Date(); // why not just this.date 
    } 

    render() { 

    return (
     <div> 
     <h1>App Hello, {this.state.date.toLocaleTimeString()}.</h1> 
     <h2>{ this.date.toLocaleTimeString() }</h2> //same result 
     </div> 
    ); 

    } 
} 

Warum sollte ich this.state.date statt nur this.date? Für die Aktualisierung dieser.date, kann ich auch Setter, etwas wie setDate() verwenden.

Answer 1

Wenn eine Eigenschaft während des Lebenszyklus Ihrer Komponenten nicht geändert wird, haben Sie im Allgemeinen Recht - das Ergebnis ist das gleiche. Aber wenn Sie diese Eigenschaft ändern, wird Ihre Reaktionskomponente diese Änderungen nicht bemerken, wenn Sie sich entscheiden, this.someProperty zu verwenden, da die React-Komponente nach der Erstmontage nur dann erneut gerendert wird, wenn setState (welches this.state Objekt aktualisiert) aufgerufen wird. Elternkomponente wird neu gerendert oder forceUpdate wird aufgerufen. Wenn die Komponente beim Ändern einer Eigenschaft erneut gerendert werden soll, sollte sie im Statusobjekt gespeichert und mit setState aktualisiert werden. Zurück zu Ihrem Beispiel: Wenn Sie setDate verwenden, um this.date zu aktualisieren, wird Ihre Komponente diese Aktion nicht bemerken und weiterhin den alten Wert anzeigen. Wenn Sie diese verwenden:

this.setState({date: '2016'}) 

wird es this.state.date aktualisieren und diese Veränderung bewusst sein, Reagieren und wird erneut rendern Ihre Komponente aktuelles Datum Wert anzuzeigen.

Answer 2

this.state ermöglicht die Beibehaltung des Status der Komponente während des Lebenszyklus der Komponenten. Es macht keinen Sinn, wenn Sie this.state verwenden und während des Lebenszyklus der Komponenten nie geändert werden.

Zustand erklären, die Sie verwenden müssen:

this.state = { 
    'key': 'initial value' 
} 

Zustand, den Sie verwenden müssen aktualisieren:

this.setState({ 
    'key': 'your updated value' 
}); 

Es ist eine schlechte Praxis Zustand wie diese zu aktualisieren. this.state.key = ein Wert.

Immer wenn Sie einen beliebigen Status Ihrer Komponente festlegen, wird die render-Methode erneut aufgerufen, um die Komponente mit dem aktualisierten Wert wiederzugeben.

Also für Ihre Frage, wenn Ihr Datum in keiner Phase des Komponentenlebenszyklus ändern wird, können Sie this.date statt this.state.date verwenden. Wenn es sich ändert und Sie den aktualisierten Wert verwenden möchten, können Sie this.state verwenden.

Answer 3

die Zustandsvariablen zu initialisieren, müssen Sie nur

this.state = { `state variable name` : `initial value` } 

zu tun, und wenn Sie ändern möchten/neuen Wert der Zustandsvariablen zuweisen, dann Sie

this.setState({`state variable name` : `new value`}) 

zu tun haben