React:Lifecycle Methods

folder Projet: test_react_project

Il est trés utile de gérer le cycle de vie d'une component pour

  1. Initialiser et configuer le state d'une component lorsqu'elle rendu pour la première fois =componentDidMount()
  2. 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

npx crcf components/TestCycle
TestCycle.js
import 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;

App.js
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;