React
स्टेटलेस फंक्शनल कंपोनेंट

टिप्पणियों

स्टेटलेस फंक्शनल कंपोनेंट

घटक आपको यूआई को स्वतंत्र , पुन: प्रयोज्य टुकड़ों में विभाजित करते हैं। यह रिएक्ट की सुंदरता है; हम एक पृष्ठ को कई छोटे पुन: प्रयोज्य घटकों में अलग कर सकते हैं ।

React v14 से पहले हम React.Component (ES6 में), या React.createClass ( React.createClass ) का उपयोग करके एक स्टेटफुल रिएक्ट घटक बना सकते हैं, भले ही इसके लिए किसी भी राज्य को डेटा का प्रबंधन करने की आवश्यकता हो या नहीं।

रिएक्ट v14 ने घटकों को परिभाषित करने का एक सरल तरीका पेश किया, जिसे आमतौर पर स्टेटलेस फंक्शनल घटकों के रूप में संदर्भित किया जाता है। ये घटक सादे जावास्क्रिप्ट कार्यों का उपयोग करते हैं।

उदाहरण के लिए:

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

यह फ़ंक्शन एक वैध रिएक्ट घटक है क्योंकि यह डेटा के साथ एक एकल props ऑब्जेक्ट तर्क को स्वीकार करता है और एक प्रतिक्रिया तत्व देता है। हम ऐसे घटकों को कार्यात्मक कहते हैं क्योंकि वे शाब्दिक जावास्क्रिप्ट कार्य हैं ।

स्टेटलेस फंक्शनल कंपोनेंट्स आमतौर पर यूआई पर ध्यान केंद्रित करते हैं; राज्य को उच्च-स्तरीय "कंटेनर" घटकों द्वारा प्रबंधित किया जाना चाहिए, या फ़्लक्स / रिडक्स आदि के माध्यम से स्टेटलेस फ़ंक्शनल घटक राज्य या जीवन चक्र विधियों का समर्थन नहीं करते हैं।

लाभ:

1. कोई वर्ग उपरि नहीं
2. this खोजशब्द के बारे में चिंता करने की ज़रूरत नहीं है
3. लिखने में आसान और समझने में आसान
4. राज्य मूल्यों के प्रबंधन के बारे में चिंता करने की ज़रूरत नहीं है
5. प्रदर्शन में सुधार

सारांश : यदि आप एक रिएक्ट घटक लिख रहे हैं जिसमें राज्य की आवश्यकता नहीं है और एक पुन: प्रयोज्य यूआई बनाना चाहते हैं, तो एक मानक रिएक्ट घटक बनाने के बजाय आप इसे एक स्टेटलेस कार्यात्मक घटक के रूप में लिख सकते हैं ।

चलो एक सरल उदाहरण लेते हैं:

मान लें कि हमारे पास एक पृष्ठ है जो एक उपयोगकर्ता को पंजीकृत कर सकता है, पंजीकृत उपयोगकर्ताओं की खोज कर सकता है या सभी पंजीकृत उपयोगकर्ताओं की सूची प्रदर्शित कर सकता है।

यह आवेदन का प्रविष्टि बिंदु है, index.js :

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

import HomePage from './homepage'

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

HomePage घटक उपयोगकर्ताओं को पंजीकृत करने और खोजने के लिए UI प्रदान करता है। ध्यान दें कि यह एक विशिष्ट प्रतिक्रिया घटक है जिसमें राज्य, UI और व्यवहार कोड शामिल हैं। पंजीकृत उपयोगकर्ताओं की सूची का डेटा state चर में संग्रहीत किया जाता है, लेकिन हमारी पुन: प्रयोज्य List (नीचे दी गई) सूची के लिए UI कोड को एन्क्रिप्ट करती है।

homepage.js : 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>
        );
    }
}

अंत में, हमारी स्टेटलेस फंक्शनल कंपोनेंट List , जिसका इस्तेमाल रजिस्टर्ड यूजर्स की लिस्ट और सर्च रिजल्ट दोनों के लिए किया जाता है, लेकिन बिना किसी स्टेट को बनाए रखे।

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;

संदर्भ: https://facebook.github.io/react/docs/compenders-and-props.html