React
Componenti funzionali stateless

Osservazioni

Componente funzionale stateless

I componenti consentono di suddividere l'interfaccia utente in pezzi indipendenti e riutilizzabili . Questa è la bellezza di React; possiamo separare una pagina in molti piccoli componenti riutilizzabili.

Prima di React v14 è stato possibile creare un componente React stateful utilizzando React.Component (in ES6) o React.createClass (in ES5), indipendentemente dal fatto che sia necessario o meno uno stato gestire i dati.

React v14 ha introdotto un modo più semplice per definire i componenti, solitamente definiti componenti funzionali stateless . Questi componenti utilizzano semplici funzioni JavaScript.

Per esempio:

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

Questa funzione è un componente React valido perché accetta un argomento oggetto props singolo con dati e restituisce un elemento React. Chiamiamo tali componenti funzionali perché sono letteralmente funzioni JavaScript.

I componenti funzionali stateless si concentrano in genere sull'interfaccia utente; lo stato dovrebbe essere gestito da componenti "contenitore" di livello superiore, o tramite Flux / Redux ecc. I componenti funzionali stateless non supportano i metodi dello stato o del ciclo di vita.

Benefici:

1. Nessun overhead di classe
2. Non devi preoccuparti di this parola chiave
3. Facile da scrivere e facile da capire
4. Non devi preoccuparti di gestire i valori di stato
5. Miglioramento delle prestazioni

Riepilogo : se si sta scrivendo un componente React che non richiede lo stato e si desidera creare un'interfaccia utente riutilizzabile, anziché creare un componente di reazione standard, è possibile scriverlo come componente funzionale stateless .

Facciamo un semplice esempio:

Supponiamo di avere una pagina in grado di registrare un utente, cercare utenti registrati o visualizzare un elenco di tutti gli utenti registrati.

Questo è il punto di ingresso dell'applicazione, index.js :

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

import HomePage from './homepage'

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

Il componente HomePage fornisce l'interfaccia utente per la registrazione e la ricerca di utenti. Si noti che si tratta di un tipico componente React che include stato, interfaccia utente e codice comportamentale. I dati per l'elenco degli utenti registrati sono memorizzati nella variabile di state , ma il nostro List riutilizzabile (mostrato sotto) incapsula il codice UI per l'elenco.

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>
        );
    }
}

Infine, la nostra List componenti funzionali senza stato , che viene utilizzata, mostra sia l'elenco degli utenti registrati che i risultati della ricerca, ma senza mantenere alcuno stato.

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;

Riferimento: https://facebook.github.io/react/docs/components-and-props.html