Cycle de vie des composants React
Dans ce chapitre, nous aborderons le cycle de vie des composants React.
Le cycle de vie d'un composant peut être divisé en trois états :
Montage : le vrai DOM a été inséré
Mise à jour : en cours de mise à jour Re-rendu
Démontage : déplacé hors du DOM réel
Les méthodes de cycle de vie sont :
componentWillMount est appelé avant le rendu, à la fois sur le client et sur le serveur.
componentDidMount : Appelé après le premier rendu, côté client uniquement. Ensuite, le composant a généré la structure DOM correspondante, accessible via this.getDOMNode(). Si vous souhaitez l'utiliser avec d'autres frameworks JavaScript, vous pouvez appeler setTimeout, setInterval ou envoyer des requêtes AJAX et d'autres opérations dans cette méthode (pour empêcher les opérations étrangères de bloquer l'interface utilisateur).
componentWillReceiveProps est appelé lorsque le composant reçoit un nouveau prop. Cette méthode ne sera pas appelée lors de l’initialisation du rendu.
shouldComponentUpdate Renvoie une valeur booléenne. Appelé lorsque le composant reçoit de nouveaux accessoires ou un nouvel état. Non appelé lors de l'initialisation ou lors de l'utilisation de forceUpdate.
Peut être utilisé lorsque vous confirmez que vous n'avez pas besoin de mettre à jour les composants.componentWillUpdate est appelé lorsque le composant reçoit de nouveaux accessoires ou un nouvel état mais n'a pas encore été rendu. Ne sera pas appelé lors de l'initialisation.
componentDidUpdate est appelé immédiatement après la fin de la mise à jour du composant. Ne sera pas appelé lors de l'initialisation.
componentWillUnmount est appelé immédiatement lorsque le composant est supprimé du DOM.
Pour des instructions détaillées sur ces méthodes, veuillez vous référer à la documentation officielle.
Une fois le composant Hello chargé, l'exemple suivant définit une minuterie via la méthode composantDidMount, réinitialise la transparence du composant toutes les 100 millisecondes et effectue un nouveau rendu :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
L'instance suivante est initialisée state, setNewnumber est utilisé pour mettre à jour state. Tout le cycle de vie est dans le composant Content.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECIEVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},
render: function () {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
