ఫంక్షనల్ కాంపోనెంట్స్, క్లాస్ కాంపోనెంట్స్ మరియు ప్యూర్ కాంపోనెంట్‌ని రియాక్ట్ చేయండి

బ్లాగ్

ఫంక్షనల్ కాంపోనెంట్స్, క్లాస్ కాంపోనెంట్స్ మరియు ప్యూర్ కాంపోనెంట్‌ని రియాక్ట్ చేయండి

ఫంక్షనల్ కాంపోనెంట్స్, క్లాస్ కాంపోనెంట్స్ మరియు ప్యూర్ కాంపోనెంట్‌ని రియాక్ట్ చేయండి

ఈ ఆర్టికల్లో మనం వివిధ రకాల రియాక్ట్ కాంపోనెంట్స్ గురించి, మరియు కాంపోనెంట్స్ (ఫంక్షనల్, క్లాస్ మరియు స్వచ్ఛమైన కాంపోనెంట్స్) మధ్య తేడాలు ఏమిటో తెలుసుకుందాం.



రియాక్ట్ భాగాలు UI ని స్వతంత్రంగా, పునర్వినియోగపరచదగిన ముక్కలుగా విభజించడానికి మరియు ప్రతి భాగాన్ని విడిగా ఆలోచించడానికి మిమ్మల్ని అనుమతిస్తాయి. రియాక్ట్ కాంపోనెంట్ లేదా రియాక్ట్. రియాక్ట్ అధికారిక డాక్యుమెంట్ ప్రకారం .

ఫంక్షనల్ కాంపోనెంట్స్



ఫంక్షనల్ కాంపోనెంట్ అనేది రియాక్ట్‌జెలలో ఒక భాగాన్ని నిర్వచించడానికి సులభమైన మార్గం, ఇది రియాక్ట్ ఎలిమెంట్‌ను అందించే సాధారణ జావాస్క్రిప్ట్ ఫంక్షన్. ఫంక్షనల్ కాంపోనెంట్‌లను స్టేట్‌లెస్ కాంపోనెంట్స్ అని కూడా అంటారు.

ఫంక్షనల్ కాంపోనెంట్ యొక్క ఉదాహరణతో అర్థం చేసుకుందాం



import React from 'react'; function App() { const greeting = 'Hello Functional Component!'; return ; } } Export default Greeting

స్వచ్ఛమైన భాగం

రియాక్ట్స్ అధికారిక డాక్యుమెంటేషన్ ప్రకారం: రియాక్ట్.ప్యూర్ కాంపోనెంట్ రియాక్ట్. కాంపోనెంట్‌ని పోలి ఉంటుంది. వాటి మధ్య వ్యత్యాసం ఏమిటంటే, రియాక్ట్.కంపొనెంట్ కాంపొనెంట్ అప్‌డేట్ () ను అమలు చేయదు, కానీ రియాక్ట్.ప్యూర్ కాంపోనెంట్ దానిని నిస్సార ఆసరా మరియు రాష్ట్ర పోలికతో అమలు చేస్తుంది.

మీ రియాక్ట్ కాంపోనెంట్ యొక్క రెండర్ () ఫంక్షన్ అదే ఆధారాలను మరియు స్థితిని ఇచ్చినట్లయితే అదే ఫలితాన్ని అందిస్తే, కొన్ని సందర్భాల్లో పనితీరును పెంచడానికి మీరు React.PureComponent ని ఉపయోగించవచ్చు.

Let's take an example while creating three files to understand the above official definition and how pure components works:

మొదటి ఫైల్ - index.js, క్రియేట్ చేసిన ఫైల్స్ క్రింద దిగుమతి చేయండి

import React, { Component } from 'react'; import Child from './Child'; import Pure from './pure'; class PureComp extends Component{ constructor(props){ super(props); this.state = { name: 'Shahab' } } shouldComponentUpdate(nextProps, nextState){ if(nextState.name !== this.state.name){ return true } return false } componentDidMount(){ setInterval(() => { this.setState({ name: 'Shahab' }) }, 2000); } render(){ return( Parent Component: {this.state.name} ) } } export default PureComp;

రెండవ ఫైల్ - pure.js

import React, { PureComponent } from 'react' class Pure extends PureComponent{ render(){ console.log('Pure Components') return( Pure Components ) } } export default Pure

మూడవ ఫైల్ - child.js

import React, {Component} from 'react' class Child extends Component{ state ={ name: 'Ibaad' } shouldComponentUpdate(nextProps, nextState){ if(nextState.name !== this.state.name){ return true } return false } render(){ console.log('Child Components') return( Child Component: {this.state.name} ) } } export default Child

నిస్సార పోలిక (ఎస్‌సి) యొక్క వివరణ పైన ఉన్న స్వచ్ఛమైన భాగాలలో ఉపయోగించబడుతుంది:
ఆదిమ రకాలు:
A మరియు b లు ఒకే విలువలు కలిగి ఉండి ఒకే రకంలో ఉంటే A (SC) b తిరిగి వస్తుంది.
ఉదా: స్ట్రింగ్ 'షాహాబ్' (SC) స్ట్రింగ్ 'షాహాబ్' నిజం తిరిగి వస్తుంది.

సంక్లిష్ట రకాలు
A మరియు b ఖచ్చితమైన ఒకే వస్తువును సూచిస్తే A (SC) b తిరిగి వస్తుంది.
శ్రేణిలో మాజీ:

రియాక్ట్ యుఐ ఫ్రేమ్‌వర్క్ 2020
Var a = [1,2,3]; Var b = [1,2,3]; Var c = a; Var ab_eq = (a === b) // false Var ac_eq = (a === b) // true

ఆబ్జెక్ట్‌లో:

Var a = {x = 1, x = 2}; Var b = {x = 1, x = 2}; Var c = a; Var ab_eq = {a === c} // false Var ac_eq = {a === b} // true

#రియాక్ట్స్ #జావాస్క్రిప్ట్ #ఫంక్షన్ #కాంపోనెంట్స్ #ఎస్ 6