React behandelt Komponenten als 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.
Reaktionszustand(Zustand) Syntax
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).
Die LikeButton-Komponente wird im folgenden Beispiel erstellt. Die Methode getInitialState wird verwendet, um den Anfangszustand zu definieren. Dieses Objekt kann über die Eigenschaft this.state gelesen werden. Wenn der Benutzer auf die Komponente klickt, wodurch sich der Status ändert, ändert die Methode this.setState den Statuswert. Nach jeder Änderung wird die Methode this.render automatisch aufgerufen, um die Komponente erneut zu rendern.
Reaktionszustand(Zustand) Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php.cn React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen