React traite les composants comme des machines à états. En interagissant avec l'utilisateur, différents états sont obtenus, puis l'interface utilisateur est rendue pour maintenir la cohérence de l'interface utilisateur et des données.
État de réaction (état) syntaxe
Dans React, il vous suffit de mettre à jour l'état du composant, puis de restituer l'interface utilisateur en fonction du nouvel état (sans manipuler le DOM).
Le composant LikeButton est créé dans l'exemple suivant. La méthode getInitialState est utilisée pour définir l'état initial, qui est un objet qui peut être lu via la propriété this.state. Lorsque l'utilisateur clique sur le composant, provoquant un changement d'état, la méthode this.setState modifie la valeur de l'état. Après chaque modification, la méthode this.render est automatiquement appelée pour restituer le composant.
État de réaction (état) exemple
<!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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne