Composant apatride

1 h Niveau 5

Introduction

Un composant React avec un état interne est appelé composant Stateful et un composant React sans aucune gestion d'état interne est appelé composant Stateless. React recommande de créer et d'utiliser autant de composants sans état que possible et de ne créer des composants avec état que lorsque c'est absolument nécessaire. De plus, React ne partage pas l'état avec les composants enfants. Les données doivent être transmises au composant enfant par le biais des propriétés de ce dernier.

Voici un exemple de transmission d'une date au composant FormattedDate.

<FormattedDate value={this.state.item.spend_date} />

L'idée générale est de ne pas compliquer à l'excès la logique de l'application et de n'utiliser les fonctions avancées que lorsque cela est nécessaire.

Créer un composant à état

Créons une application React pour afficher la date et l'heure actuelles.

Tout d'abord, créez une nouvelle application React, react-clock-app en utilisant le bundler Create React App ou Rollup en suivant les instructions du chapitre Créer une application React.

Ensuite, ouvrez l'application dans votre éditeur préféré.

Ensuite, créez le dossier src sous le répertoire racine de l'application.

Ensuite, créez un dossier de composants sous le dossier src.

Ensuite, créez un fichier Clock.js dans le dossier src/components et commencez à le modifier.

Ensuite, importez la bibliothèque React.

import React from 'react';

Ensuite, créez le composant Clock.

class Clock extends React.Component { 
    constructor(props) { 
        super(props); 
    } 
}

Ensuite, initialiser l'état avec la date et l'heure actuelles.

constructor(props) { 
    super(props); 
    this.state = { 
        date: new Date() 
    } 
}

Ensuite, ajoutez une méthode, setTime() pour mettre à jour l'heure actuelle -

setTime() { 
    console.log(this.state.date); 
    this.setState((state, props) => (
        {
            date: new Date() 
        } 
    )) 
}

Ensuite, utilisez la méthode JavaScript, setInterval et appelez la méthode setTime() toutes les secondes pour vous assurer que l'état du composant est mis à jour toutes les secondes.

constructor(props) { 
    super(props); 
    this.state = { 
        date: new Date() 
    } 
    setInterval( () => this.setTime(), 1000); 
}

Ensuite, créez une fonction de rendu.

render() {
}

Ensuite, mettez à jour la méthode ```render()`` pour afficher l'heure actuelle.

render() {
    return (
        <div><p>The current time is {this.state.date.toString()}</p></div>
    );
}

Enfin, exportez le composant.

export default Clock;

Le code source complet du composant Clock est le suivant -

import React from 'react';

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        }      
        setInterval( () => this.setTime(), 1000);
    }
    setTime() {
        console.log(this.state.date);
        this.setState((state, props) => (
            {
                date: new Date()
            }
        ))
    }
    render() {
        return (
            <div>
                <p>The current time is {this.state.date.toString()}</p>
            </div>
        );
    }
}
export default Clock;

Ensuite, créez un fichier, index.js, dans le dossier src et utilisez le composant Clock.

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './components/Clock';

ReactDOM.render(
    <React.StrictMode>
        <Clock />
    </React.StrictMode>,
    document.getElementById('root')
);

Enfin, créez un dossier public sous le dossier racine et créez le fichier index.html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Clock</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/JavaScript" src="./index.js"></script>
    </body>
</html>

Ensuite, servez l'application en utilisant la commande npm.

npm start

Ensuite, ouvrez le navigateur et entrez http://localhost:3000 dans la barre d'adresse et appuyez sur la touche Entrée. L'application affichera l'heure et la mettra à jour toutes les secondes.

The current time is Wed Nov 11 2020 10:10:18 GMT+0530(Indian Standard Time)

L'application ci-dessus fonctionne bien mais affiche une erreur dans la console.

Can't call setState on a component that is not yet mounted.

Le message d'erreur indique que le setState ne doit être appelé qu'après le montage du composant.

Qu'est-ce que le montage ?

Le composant React a un cycle de vie et le montage est l'une des étapes de ce cycle de vie. Nous en apprendrons plus sur le cycle de vie dans les prochains cours.

Se connecter pour voir la suite
logo discord

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !

En savoir plus