React
Stateless functionele componenten

Opmerkingen

Stateless functionele component

Met componenten kunt u de gebruikersinterface splitsen in onafhankelijke , herbruikbare stukken. Dit is de schoonheid van React; we kunnen een pagina in veel kleine herbruikbare componenten scheiden.

Voorafgaand aan React v14 konden we een stateful React-component maken met React.Component (in ES6) of React.createClass (in ES5), ongeacht of het een status vereist om gegevens te beheren of niet.

React v14 introduceerde een eenvoudigere manier om componenten te definiëren, meestal aangeduid als staatloze functionele componenten . Deze componenten gebruiken eenvoudige JavaScript-functies.

Bijvoorbeeld:

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

Deze functie is een geldige React-component omdat deze een enkel object props argument met gegevens accepteert en een React-element retourneert. We noemen dergelijke componenten functioneel omdat ze letterlijk JavaScript- functies zijn .

Stateless functionele componenten richten zich meestal op UI; status moet worden beheerd door "container" -componenten op een hoger niveau, of via Flux / Redux enz. Stateless functionele componenten ondersteunen geen status- of levenscyclusmethoden.

Voordelen:

1. Geen klasse overhead
2. Maak je geen zorgen om this trefwoord
3. Eenvoudig te schrijven en gemakkelijk te begrijpen
4. U hoeft zich geen zorgen te maken over het beheren van statuswaarden
5. Prestatieverbetering

Samenvatting : als u een React-component schrijft waarvoor geen status vereist is en een herbruikbare gebruikersinterface wilt maken, kunt u het in plaats van een standaard React-component maken als een stateless functionele component .

Laten we een eenvoudig voorbeeld nemen:

Stel dat we een pagina hebben die een gebruiker kan registreren, zoeken naar geregistreerde gebruikers of een lijst met alle geregistreerde gebruikers kan weergeven.

Dit is het toegangspunt van de toepassing, index.js :

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

import HomePage from './homepage'

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

De HomePage component biedt de gebruikersinterface om gebruikers te registreren en te zoeken. Merk op dat het een typisch React-onderdeel is, inclusief status, gebruikersinterface en gedragscode. De gegevens voor de lijst van geregistreerde gebruikers wordt opgeslagen in de state variabel, maar onze herbruikbare List (zie hieronder) kapselt de UI-code voor de lijst.

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

Tot slot, onze statenloze functionele component List , die wordt gebruikt weergave zowel de lijst van geregistreerde gebruikers en de zoekresultaten, maar zonder het handhaven van elke staat zelf.

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;

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