React
Statslösa funktionella komponenter

Anmärkningar

Statslös funktionell komponent

Komponenter låter dig dela UI: n i oberoende , återanvändbara delar. Detta är skönheten i React; vi kan dela en sida i många små återanvändbara komponenter .

Innan React v14 kunde vi skapa en tillståndsfull React-komponent med React.Component (i ES6) eller React.createClass (i ES5), oavsett om det kräver något tillstånd för att hantera data eller inte.

React v14 introducerade ett enklare sätt att definiera komponenter, vanligtvis kallad statslösa funktionella komponenter . Dessa komponenter använder vanliga JavaScript-funktioner.

Till exempel:

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

Denna funktion är en giltig React-komponent eftersom den accepterar ett enda props objektargument med data och returnerar ett React-element. Vi kallar sådana komponenter funktionella eftersom de bokstavligen är JavaScript- funktioner .

Statslösa funktionella komponenter fokuserar vanligtvis på UI; tillstånd bör hanteras av högre nivåer av ”container” -komponenter, eller via Flux / Redux etc. Statlösa funktionella komponenter stöder inte tillstånd eller livscykelmetoder.

fördelar:

1. Ingen klassomkostnad
2. Du behöver inte oroa dig för det this sökordet
3. Lätt att skriva och lätt att förstå
4. Behöver inte oroa dig för att hantera statliga värden
5. Prestandaförbättring

Sammanfattning : Om du skriver en React-komponent som inte kräver tillstånd och vill skapa ett återanvändbart användargränssnitt, istället för att skapa en standard React-komponent kan du skriva den som en statslös funktionell komponent .

Låt oss ta ett enkelt exempel:

Låt oss säga att vi har en sida som kan registrera en användare, söka efter registrerade användare eller visa en lista över alla registrerade användare.

Detta är startpunkten för applikationen, index.js :

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

import HomePage from './homepage'

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

HomePage komponenten ger användargränssnittet att registrera och söka efter användare. Observera att det är en typisk React-komponent som inkluderar tillstånd, UI och beteendekod. Uppgifterna för listan över registrerade användare lagras i state , men vår återanvändbara List (visas nedan) kapslar UI-koden för listan.

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

Slutligen vår statslös funktionell komponent List som används display både listan över registrerade användare och sökresultaten, men utan att upprätthålla någon staten själv.

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;

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