Ich studiere Kapitel Status und Lebenszyklus in reactJS mit Clock class und Ich verstehe nicht, warum ich meine Variablen "myFirstNumber, mySecondNumber, myWord" neu rendern kann, die keine Zustände sind, wenn ich diesen Code in CodePen verwende:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
    this.mySecondNumber = 0;
  }

  componentDidMount() {
    this.myFirstNumber = 0;
    this.myWord = "Start";
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );

  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),

    });
        this.myFirstNumber += 1;
       this.mySecondNumber += 1;
    if (this.myFirstNumber ===5) {
      this.myWord = "Finish";
    }
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        <h2>myFirstNumber from ComponentDidMount: {this.myFirstNumber}</h2>
        <h2>mySecondNumber from constructor: {this.mySecondNumber}</h2>
        <h2>myWord: {this.myWord}</h2>
      </div>
    );
  }
}

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

Die Render-Methode rendert alle DOM pro Sekunde für meine Variablen, die keine Zustände sind.

0
Charly Leroy 19 Feb. 2020 im 21:25

3 Antworten

Beste Antwort

Wenn Sie die Funktion this.setState aufrufen, wird das DOM erneut gerendert. Hier wird das DOM jede Sekunde aktualisiert, wenn this.state.date über this.setState geändert wird und neue Werte angezeigt werden. Wenn Sie das Datum jedoch außerhalb des Status halten, können Sie sehen, dass das DOM nicht mehr erneut gerendert wird. Das gleiche Ergebnis, wenn Sie "myWord" oder "firstNumber" ändern möchten, ohne den Status zu ändern.

0
Renji Joseph Sabu Niravath 19 Feb. 2020 im 18:55

Wenn Sie tick() ausführen, löst der Teil setState das erneute Rendern aus und verarbeitet alles, ob Status oder nicht.

0
izambl 19 Feb. 2020 im 18:32

In componentDidMount() planen Sie ein Intervall, das jede Sekunde die tick() Funktion auslöst. Innerhalb dieser Funktion aktualisieren Sie den Status der Komponente, indem Sie setState() aufrufen und die aktuelle Zeit als neuen Statuswert übergeben. Darüber hinaus ändern Sie einige lokale Variablen der Klasse. Wenn an setState() übergebene Argumente von der JS-Engine verarbeitet werden, aktualisiert die Komponente ihren Status, was asynchron und nicht unmittelbar nach dem Aufruf von setState() geschieht.

Dann wird die Funktion render() vom Framework aufgerufen. Die Funktion render() gibt eine Ausgabe zurück, die die aktuellen Werte aller in der Funktion render() angeforderten Variablen widerspiegelt. Wenn Sie setState() nicht innerhalb der tick() -Methode aufrufen, werden keine Änderungen angezeigt, obwohl Sie nach jeder Sekunde myFirstNumber und andere Variablen ändern.

0
mrJoe 19 Feb. 2020 im 18:53