Heim >Web-Frontend >js-Tutorial >Was ist eine Reaktionszustandsmaschine?
Was ist eine Reaktionszustandsmaschine?
- coldplay.xixiOriginal
- 2020-11-27 11:05:011969Durchsuche
React betrachtet die Komponente als Zustandsmaschine, realisiert verschiedene Zustände durch Interaktion mit dem Benutzer und rendert dann die Benutzeroberfläche, um die Benutzeroberfläche und die Daten konsistent zu halten.
React behandelt Komponenten als Zustandsmaschine (Zustandsmaschinen). Durch die Interaktion mit dem Benutzer werden verschiedene Zustände erreicht und anschließend die Benutzeroberfläche gerendert, um die Benutzeroberfläche und die Daten konsistent zu halten.
In React müssen Sie nur den Status der Komponente aktualisieren und dann die Benutzeroberfläche basierend auf dem neuen Status neu rendern (ohne das DOM zu manipulieren).
Bei Anwendungen mit vielen Komponenten ist es sehr wichtig, die von den Komponenten bei Zerstörung belegten Ressourcen freizugeben.
Jedes Mal, wenn die Clock-Komponente zum ersten Mal in das DOM geladen wird, möchten wir einen Timer generieren, der in React als Mount bezeichnet wird.
In ähnlicher Weise möchten wir immer dann, wenn das von Clock generierte DOM entfernt wird, auch den Timer löschen, was in React als Entladen bezeichnet wird.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script>
</body>
</html>Analyse:
Die Methoden componentDidMount() und componentWillUnmount() werden als Lebenszyklus-Hooks bezeichnet. componentDidMount()与componentWillUnmount()方法被称作生命周期钩子。
在组件输出到 DOM 后会执行componentDidMount()钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
当 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。
React 然后调用 Clock 组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。
当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。
浏览器每秒钟调用tick()方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date
componentDidMount() ausgeführt. Wir können einen Timer für diesen Hook festlegen. this.timerID ist die ID des Timers. Wir können den Timer im ComponentWillUnmount()-Hook deinstallieren. Wenn die Ausgabe von Clock in das DOM eingefügt wird, ruft React den Lebenszyklus-Hook „componentDidMount()“ auf. Darin erfordert die Clock-Komponente, dass der Browser einen Timer einstellt und tick() jede Sekunde aufruft. 🎜🎜Der Browser ruft jede Sekunde die MethodeBei der Übergabe an
ReactDOM.render()ruft React den Konstruktor der Clock-Komponente auf. Da Clock die aktuelle Uhrzeit anzeigen muss, wird this.state mit einem Objekt initialisiert, das die aktuelle Uhrzeit enthält. Wir werden diesen Status später aktualisieren. React ruft dann die Methoderender()der Clock-Komponente auf. Dadurch versteht React, was auf dem Bildschirm angezeigt werden soll, und aktualisiert dann das DOM, um es an die gerenderte Ausgabe der Uhr anzupassen.
tick() auf. Darin plant die Clock-Komponente Aktualisierungen der Benutzeroberfläche, indem sie setState() mit einem Objekt aufruft, das die aktuelle Uhrzeit enthält. Durch den Aufruf von setState() weiß React, dass sich der Status geändert hat und ruft die render()-Methode erneut auf, um zu bestimmen, was auf dem Bildschirm angezeigt werden soll. Dieses Mal wird der this.state.date in der render()-Methode anders sein, sodass die gerenderte Ausgabe die aktualisierte Zeit enthält und das DOM entsprechend aktualisiert wird. 🎜🎜Sobald die Clock-Komponente aus dem DOM entfernt wird, ruft React die Hook-Funktion „componentWillUnmount()“ auf und der Timer wird gelöscht. 🎜🎜🎜Verwandte Lernempfehlungen: 🎜Javascript-Lern-Tutorial🎜🎜🎜Das obige ist der detaillierte Inhalt vonWas ist eine Reaktionszustandsmaschine?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!