Maison > Article > interface Web > qu'est-ce que la machine à états de réaction
qu'est-ce que la machine à états de réaction
- coldplay.xixioriginal
- 2020-11-27 11:05:011932parcourir
React considère le composant comme une machine à états, réalise différents états grâce à l'interaction avec l'utilisateur, puis restitue l'interface utilisateur pour maintenir la cohérence de l'interface utilisateur et des données.
React traite les composants comme une machine à états (State Machines). 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.
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).
Dans les applications comportant de nombreux composants, il est très important de libérer les ressources occupées par les composants lors de leur destruction.
Nous souhaitons générer un timer à chaque fois que le composant Clock est chargé pour la première fois dans le DOM, ce que l'on appelle un montage dans React.
De même, nous souhaitons également effacer le timer chaque fois que le DOM généré par Clock est supprimé, ce qui est appelé déchargement dans React.
<!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 : Les méthodes
componentDidMount() et componentWillUnmount() sont appelées hooks de cycle de vie.
Le hook componentDidMount() sera exécuté après la sortie du composant vers le DOM, et nous pouvons définir une minuterie sur ce hook.
this.timerID est l'ID du timer. Nous pouvons désinstaller le timer dans le hook composantWillUnmount().
Quand est passé à ReactDOM.render(), React appelle le constructeur du composant Clock. Puisque Clock doit afficher l’heure actuelle, this.state est initialisé avec un objet contenant l’heure actuelle. Nous mettrons à jour ce statut plus tard.
React appelle ensuite la méthode render() du composant Clock. C'est React qui comprend ce qui devrait être à l'écran, puis React met à jour le DOM pour qu'il corresponde à la sortie rendue par l'horloge.
Lorsque la sortie de Clock est insérée dans le DOM, React appelle le hook de cycle de vie composantDidMount(). Dans celui-ci, le composant Clock nécessite que le navigateur définisse une minuterie et appelle tick() chaque seconde.
Le navigateur appelle la méthode tick() toutes les secondes. Dans celui-ci, le composant Clock planifie les mises à jour de l'interface utilisateur en appelant setState() avec un objet contenant l'heure actuelle. En appelant setState() , React sait que l'état a changé et appelle à nouveau la méthode render() pour déterminer ce qui doit être affiché à l'écran. Cette fois, le this.state.date dans la méthode render() sera différent, donc la sortie rendue contiendra l'heure mise à jour et le DOM sera mis à jour en conséquence.
Une fois le composant Clock supprimé du DOM, React appellera la fonction hook elementWillUnmount() et la minuterie sera effacée.
Recommandations d'apprentissage associées : Tutoriel d'apprentissage javascript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!