React
Zustandslose Funktionskomponenten

Bemerkungen

Zustandslose Funktionskomponente

Mit Komponenten können Sie die Benutzeroberfläche in unabhängige , wiederverwendbare Teile aufteilen. Das ist die Schönheit von React; Wir können eine Seite in viele kleine wiederverwendbare Komponenten aufteilen.

Vor React v14 konnten wir eine Stateful-React-Komponente mit React.Component (in ES6) oder React.createClass (in ES5) erstellen, unabhängig davon, ob zur Verwaltung von Daten ein Status erforderlich ist oder nicht.

React v14 führte eine einfachere Methode zur Definition von Komponenten ein, die normalerweise als zustandslose Funktionskomponenten bezeichnet werden . Diese Komponenten verwenden einfache JavaScript-Funktionen.

Zum Beispiel:

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

Diese Funktion ist eine gültige React-Komponente, da sie ein einzelnes props Objektargument mit Daten akzeptiert und ein React-Element zurückgibt. Wir bezeichnen solche Komponenten als funktional, weil sie buchstäblich JavaScript- Funktionen sind .

Zustandslose Funktionskomponenten konzentrieren sich normalerweise auf die Benutzeroberfläche. state sollte von übergeordneten "Container" -Komponenten oder über Flux / Redux usw. verwaltet werden. Statuslose Funktionskomponenten unterstützen keine Status- oder Lebenszyklusmethoden.

Leistungen:

1. Kein Unterrichtsaufwand
2. Machen Sie sich keine Sorgen um this Keyword
3. Einfach zu schreiben und leicht zu verstehen
4. Sie müssen sich keine Sorgen um die Verwaltung der Staatswerte machen
5. Leistungsverbesserung

Zusammenfassung : Wenn Sie eine React-Komponente schreiben, für die kein Status erforderlich ist, und eine wiederverwendbare Benutzeroberfläche erstellen möchte, können Sie sie anstelle einer Standard-React-Komponente als zustandslose Funktionskomponente schreiben.

Nehmen wir ein einfaches Beispiel:

Nehmen wir an, wir haben eine Seite, die einen Benutzer registrieren, nach registrierten Benutzern suchen oder eine Liste aller registrierten Benutzer anzeigen kann.

Dies ist der Einstiegspunkt der Anwendung index.js :

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

import HomePage from './homepage'

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

Die HomePage Komponente bietet die Benutzeroberfläche zum Registrieren und Suchen nach Benutzern. Beachten Sie, dass es sich um eine typische React-Komponente handelt, die Status, Benutzeroberfläche und Verhaltenscode enthält. Die Daten für die Liste der registrierten Benutzer werden in dem gespeicherten state variabel, aber unsere wiederverwendbare List (siehe unten) kapselt den UI - Code für die 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>
        );
    }
}

Schließlich zeigt unsere stateless-Funktionskomponente List , die verwendet wird, sowohl die Liste der registrierten Benutzer als auch die Suchergebnisse, ohne jedoch den Status selbst beizubehalten.

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;

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