React
Bezstanowe elementy funkcjonalne

Uwagi

Bezstanowy element funkcjonalny

Komponenty pozwalają podzielić interfejs użytkownika na niezależne części wielokrotnego użytku . To jest piękno React; możemy podzielić stronę na wiele małych elementów wielokrotnego użytku.

Przed wersją React 14 mogliśmy utworzyć React.Component komponent React za pomocą React.Component (w ES6) lub React.createClass (w ES5), niezależnie od tego, czy wymaga ono jakiegokolwiek stanu do zarządzania danymi, czy nie.

React v14 wprowadził prostszy sposób definiowania komponentów, zwykle nazywanych bezpaństwowymi komponentami funkcjonalnymi . Te komponenty używają zwykłych funkcji JavaScript.

Na przykład:

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

Ta funkcja jest poprawnym komponentem React, ponieważ akceptuje argument danych pojedynczego obiektu props z danymi i zwraca element React. Takie komponenty nazywamy funkcjonalnymi, ponieważ są dosłownie funkcjami JavaScript.

Bezstanowe elementy funkcjonalne zwykle koncentrują się na interfejsie użytkownika; stan powinien być zarządzany przez komponenty „kontenerowe” wyższego poziomu lub przez Flux / Redux itp. Bezstanowe komponenty funkcjonalne nie obsługują metod stanu ani cyklu życia.

Korzyści:

1. Bez kosztów ogólnych
2. Nie musisz się martwić this słowem kluczowym
3. Łatwy do napisania i łatwy do zrozumienia
4. Nie musisz się martwić o zarządzanie wartościami stanu
5. Poprawa wydajności

Podsumowanie : Jeśli piszesz komponent React, który nie wymaga stanu i chcesz utworzyć interfejs użytkownika wielokrotnego użytku, zamiast tworzyć standardowy komponent React, możesz napisać go jako bezpaństwowy komponent funkcjonalny .

Weźmy prosty przykład:

Załóżmy, że mamy stronę, na której można zarejestrować użytkownika, wyszukać zarejestrowanych użytkowników lub wyświetlić listę wszystkich zarejestrowanych użytkowników.

To jest punkt wejścia aplikacji, index.js :

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

import HomePage from './homepage'

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

Składnik HomePage zapewnia interfejs użytkownika do rejestracji i wyszukiwania użytkowników. Pamiętaj, że jest to typowy składnik React, w tym stan, interfejs użytkownika i kod behawioralny. Dane dla listy zarejestrowanych użytkowników są przechowywane w zmiennej state , ale nasza List wielokrotnego użytku (pokazana poniżej) zawiera kod UI dla listy.

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

Wreszcie, nasza bezpaństwowa List funkcjonalna , która jest używana, wyświetla zarówno listę zarejestrowanych użytkowników, jak i wyniki wyszukiwania, ale bez utrzymywania samego stanu.

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;

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