React
Composants fonctionnels sans état

Remarques

Composant fonctionnel sans état

Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables . C'est la beauté de React; nous pouvons séparer une page en plusieurs petits composants réutilisables.

Avant React v14, nous pouvions créer un composant React avec React.Component aide de React.Component (dans ES6) ou React.createClass (dans ES5), qu'il nécessite ou non un état pour gérer les données.

React v14 a introduit un moyen plus simple de définir des composants, généralement appelés composants fonctionnels sans état . Ces composants utilisent des fonctions JavaScript simples.

Par exemple:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Cette fonction est un composant React valide car elle accepte un seul argument d'objet props avec des données et renvoie un élément React. Nous appelons ces composants fonctionnels car ils sont littéralement des fonctions JavaScript.

Les composants fonctionnels sans état se concentrent généralement sur l'interface utilisateur; L'état doit être géré par des composants «conteneur» de niveau supérieur, ou via Flux / Redux, etc. Les composants fonctionnels sans état ne prennent pas en charge les méthodes d'état ou de cycle de vie.

Avantages:

1. Pas de surcharge de classe
2. Vous n'avez pas à vous soucier de this mot clé
3. Facile à écrire et facile à comprendre
4. Vous n'avez pas à vous soucier de la gestion des valeurs d'état
5. Amélioration des performances

Résumé : Si vous écrivez un composant React qui ne nécessite pas d'état et que vous souhaitez créer une interface utilisateur réutilisable, au lieu de créer un composant React standard, vous pouvez l'écrire en tant que composant fonctionnel sans état .

Prenons un exemple simple:

Disons que nous avons une page qui peut enregistrer un utilisateur, rechercher des utilisateurs enregistrés ou afficher une liste de tous les utilisateurs enregistrés.

C'est le point d'entrée de l'application, index.js :

import React from 'react';
import ReactDOM from 'react-dom';

import HomePage from './homepage'

ReactDOM.render(
    <HomePage/>,
    document.getElementById('app')
);

Le composant HomePage fournit l'interface utilisateur pour vous enregistrer et rechercher des utilisateurs. Notez qu'il s'agit d'un composant React typique, y compris l'état, l'interface utilisateur et le code comportemental. Les données pour la liste des utilisateurs enregistrés sont stockées dans la variable d' state , mais notre List réutilisable (illustrée ci-dessous) encapsule le code de l'interface utilisateur pour la liste.

homepage.js :

import React from 'react'
import {Component} from 'react';

import List from './list';

export default class Temp extends Component{
    
    constructor(props) {
        super();
        this.state={users:[], showSearchResult: false, searchResult: []};
    }

    registerClick(){
        let users = this.state.users.slice();
        if(users.indexOf(this.refs.mail_id.value) == -1){
            users.push(this.refs.mail_id.value);
            this.refs.mail_id.value = '';
            this.setState({users});
        }else{
            alert('user already registered');
        }
    }

    searchClick(){
        let users = this.state.users;
        let index = users.indexOf(this.refs.search.value); 
        if(index >= 0){
            this.setState({searchResult: users[index], showSearchResult: true});
        }else{
            alert('no user found with this mail id');
        }
    }

    hideSearchResult(){
        this.setState({showSearchResult: false});
    }

    render() {
        return (
            <div>
                <input placeholder='email-id' ref='mail_id'/>
                <input type='submit' value='Click here to register' onClick={this.registerClick.bind(this)}/>
                <input style={{marginLeft: '100px'}} placeholder='search' ref='search'/>
                <input type='submit' value='Click here to register' onClick={this.searchClick.bind(this)}/>
                {this.state.showSearchResult ?
                    <div>
                        Search Result:
                        <List users={[this.state.searchResult]}/>
                        <p onClick={this.hideSearchResult.bind(this)}>Close this</p>
                    </div>
                    :
                    <div>
                        Registered users:
                        <br/>
                        {this.state.users.length ? 
                            <List users={this.state.users}/>
                            :
                            "no user is registered"
                        }
                    </div>
                }
            </div>
        );
    }
}

Enfin, notre List composants fonctionnels sans état , utilisée pour afficher à la fois la liste des utilisateurs enregistrés et les résultats de la recherche, mais sans conserver aucun état.

list.js :

import React from 'react';
var colors = ['#6A1B9A', '#76FF03', '#4527A0'];

var List = (props) => {
    return(
        <div>
            {
                props.users.map((user, i)=>{
                    return(
                        <div key={i} style={{color: colors[i%3]}}>
                            {user}
                        </div>
                    );                
                })
            }
        </div>
    );
}

export default List;

Référence: https://facebook.github.io/react/docs/components-and-props.html