React:Lifecycle Methods
Il est trés utile de gérer le cycle de vie d'une component pour
- Initialiser et configuer le state d'une component lorsqu'elle rendu pour la première fois =componentDidMount()
- Libérer les ressource utilisé par une component ,lorsque la component est détruite=componentWillUnmount()
Exemple
On va créer un component TestCycle qui permet d'afficher l'heure en temps réel
TestCycle.jsimport React, { Component } from "react";
class TestCycle extends Component {
constructor(props) {
super(props);
/*Créer une state contenant un attribut date */
this.state = {date: new Date()};
}
/*lorsque la component est rendu on lance le timer setInterval */
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
/*on efface le timer lorsque la component n'est plus affichée*/
componentWillUnmount() {
clearInterval(this.timerID);
}
/*Fonction qui permet de changer le state */
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h2><center> {this.state.date.toLocaleTimeString()}</center></h2>
</div>
);
}
}
export default TestCycle;
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navigation from './components/navigation/navigation.js'
/*importer la component Test pour l'afficher */
import TestCycle from './components/TestCycle/TestCycle.js'
/*importer les composantes bootstrap utilisé dans App*/
import {Container} from 'react-bootstrap';
function App() {
return (
<div>
<Navigation />
<Container fluid>
{/*appler la TestCycle */}
<TestCycle />
</Container>
</div>
);
}
export default App;
