ரியாக்ட் ஜெ எஸ் ஃபங்க்சனல் காம்பனண்ட்ஸ் மற்றும் கிளாஸ் காம்பனண்ட்ஸ் என்ன வேறுபாடு?

 To learn more about  c, c++, java, c#, vb.net, asp.net, asp.net core, javascript, angular, react js, web designing, fullstack web development , python , php, my sql, sql server ,ms-office, tally contact:

919629329142

both direct and on line coaching available.

 

இந்த கட்டுரையில் count என்ற சான்று பயன்பாட்டை உருவாக்குவோம்.”Add” என்ற பட்டனை கிளிக் செய்யும் பொழுது கவுண்ட் ஆனது 1 அதிகரிக்க வேண்டும். இந்த நிரல் மூலம் ஃபங்க்சனல் காம்பனண்ட்டுகளிக்கும் கிளாஸ் காம்பனன்ட்டுகளுக்கும் உள்ள வித்தியாசத்தை அறிவோம்.

ஃபங்க்சனல் காம்பனண்ட்

இது ரியாக்ட் ஜெ எஸ்ஸில் பயன்படும் காமன் காம்பனன்ட் ஆகும்.இவை ஒரு ஜாவா ஸ்கிரிப்ட் ஃபங்க்சன் தான். ரியாக்டில் ஜாவாஸ்கிரிப்ட் ஃபங்க்சன் மூலம் ஃபங்க்சனல் காப்பனண்டை உருவாக்குவோம்.

சிண்டாக்ஸ்.

const Car=()=> {

  return <h2>Hi, I am also a Car!</h2>;

}

 

சான்று நிரல்.-1

import React ,{useState} from "react";

 

const FunctionalComponent=()=>{

    const[count , setCount]=useState(0);

 

    const increase=()=>{

        setCount(count+1);

    }

 

    return

        <div style={{margin:'50px'}}>

            <h1>Welcome to Geeks for Geeks </h1>

            <h3>Counter App using Functional Component : </h3>

          <h2>{count}</h2>

            <button onClick={increase}>Add</button>

        </div>

    )

} 

 

 

export default FunctionalComponent;

 

வெளியீடு:

 கிளாஸ் காம்பனண்ட்

இது மாடர்ன் வெப் பயன்பாடுகளின் பிரட் மற்றும் பட்டர் ஆகும். இவை சாதாரண கிளாஸ்கள் தான்.இவை ஒன்றுக்கு மேற்பட்ட ஃபங்க்சன்களின் தொகுப்பாகும்.

சிண்டாக்ஸ்.

class Car extends React.Component {

  render() {

    return <h2>Hi, I am a Car!</h2>;

  }

}

சான்று  நிரல்-2

import React from "react";

 

class ClassComponent extends React.Component{

    constructor(){

        super();

        this.state={

            count :0

        };

        this.increase=this.increase.bind(this);

    }

     

   increase(){

       this.setState({count : this.state.count +1});

   }

 

    render(){

        return (

            <div style={{margin:'50px'}}>

               <h1>Welcome to Geeks for Geeks </h1>

               <h3>Counter App using Class Component : </h3>

               <h2> {this.state.count}</h2> 

               <button onClick={this.increase}> Add</button>

 

            </div>

        )

    }

}

 

export default ClassComponent;

 

வெளியீடு:

Hooks என்பது ரியாக்ட் 16.8 வெர்சனில் அறிமுகப்படுத்தப்பட்ட புதிய கான்செப்ட் ஆகும்.இவை கிளாஸ் காம்பனண்டுகள் எழுதாமலேயே ஸ்டேட் மற்றும் புதிய ரியாக்ட் அம்சங்களை உருவாக்க பயன்படுகின்றது.

சான்று நிரல் ஒன்றில் நாம் ஹூக்ஸை பயன்படுத்தி ஸ்டேட்டை நிர்வாகிக்கின்றோம். இதற்கு முன் ஒரு ஃபங்க்சனல் காம்பனட்டை எழுதி அதற்கு ஸ்டேட் பயன்படுத்த வேண்டுமென்றால் அவற்றை கிளாஸ் காம்பனண்ட்டாக மாற்ற  வேண்டும்.ஹூக்ஸை பயன்படுத்தி கிளாஸ் காம்பனனாட்டாக எழுதாமல் ஃபங்க்சனல் காம்பனண்ட்டிலேயே ஸ்ட்டை உருவாக்கி மேனேஜ்  செய்யலாம்.

இரண்டுக்கும் உள்ள வேறுபாடுகள்.

ஃபங்க்சனல் காம்பனண்ட்

1.      இது ஒரு பிளைன் ஜாவாஸ்கிரிப்ட் நிரலாகும்.இது props என்பதை ஆர்க்கியொமெண்ட் ஆக ஏற்று ரியாக்ட் எலிமெண்டை ரிடர்ன் செய்கின்றது.

2.      ஃபங்க்சனல் காம்பனண்ட்களில் render என்ற மெத்தட் கிடையாது.

3.      ஸ்டேட்லெஸ் காம்பனட் என்றும் அறியப்படுகின்றது.இவை டேட்டாவை ஏற்று அவற்றை குறிப்பிட்டஃபார்மில் வெளியிடுகின்றது.முக்கியமாக UI என்பதை ரெண்டெர் செய்கின்றது.

4.      ரியாக்ட் லைஃப் சைக்கிள் மெத்தடுகளை ஃபங்க்சனல் காம்பண்ட் களில் எழுத முடியாது.

கிளாஸ் காம்பனண்ட்ஸ்

1.      இது காம்பனண்ட் கிளாஸை எக்ஸ்டென்ட் செய்யும் கிளாஸ் ஆகும்.இது ரெண்டெர் மெத்தட் மூலம் ஒரு ரியாக்ட் எலிமெண்டை ரிடர்ன் செய்யும் .

2.      இது HTML –ஐ ரிடர்ன் செய்யுன் ரெண்டெர் மெத்தடை கட்டாயம் கொண்டிருக்க வேண்டும்.

3.      இவை லாஜிக் மற்றும் ஸ்டேட்டை இம்ப்லிமென்ட் செய்வதால் ஸ்டேட்ஃபுல் என  அறியப்படுகின்றது.

4.      இந்த கிளாசின் உள்ளே லைஃப் சைக்கிள் மெத்தடுகளை எழுதலாம்.

 

 

நன்றி.

முத்து கார்த்திகேயன்,மதுரை.