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>我。點我切換狀態(tài)。
</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