హయ్యర్ ఆర్డర్ కాంపోనెంట్స్ (HOC లు) ఒక రకమైన రియాక్ట్ భాగం, ఇది మీ అప్లికేషన్‌లో తర్కాన్ని తిరిగి ఉపయోగించడంలో మీకు సహాయపడుతుంది. పరిభాష సంక్లిష్టంగా అనిపించవచ్చు, కానీ HOC లు నిర్వహించడం సులభం మరియు కోడ్ బేస్ నిర్వహణను సులభతరం చేస్తుంది.

అధిక-ఆర్డర్ భాగం ఎల్లప్పుడూ అదనపు భాగాలతో పిల్లల భాగాలను చుట్టేస్తుంది. ఒక HOC ఒక పరామితిగా ఒక భాగాన్ని తీసుకునే ఫంక్షన్‌గా నిర్వచించబడింది. అప్పుడు అది ఒక ఫైల్ను తిరిగి ఇస్తుంది క్రొత్తది భాగం, ఇది సాధారణంగా అదనపు ఆధారాలతో చుట్టబడిన ఇన్‌పుట్ భాగాన్ని చేస్తుంది.

ఒక సాధారణ ఉదాహరణ

HOC లు అర్ధవంతం అయినప్పుడు అభినందించడానికి ఉత్తమ మార్గం వాటిని చర్యలో చూడటం. వినియోగదారు కార్ట్ స్థితి అనువర్తనంలో కేంద్రంగా నిల్వ చేయబడిన సాధారణ చెక్అవుట్ వ్యవస్థను పరిశీలిద్దాం. మా ఉదాహరణలు Redux ను స్టేట్ ఆర్కైవ్‌గా చూపిస్తాయి, కానీ సచిత్ర ప్రయోజనాల కోసం మాత్రమే.

ఈ వస్తువు మా అనువర్తనం యొక్క స్థితిని సూచిస్తుందని అనుకుందాం:

{
 checkout: {
 items: [
 {
 label: "Product 1",
 price: 150.00,
 quantity: 2
 },
 {
 label: "Product 2",
 price: 75.00,
 quantity: 1
 }
 ]
 }
}

యూజర్ కార్ట్‌లోని అంశాలను సూచించే సాధారణ శ్రేణి మాకు ఉంది. మా చెక్అవుట్ భాగాలు ఈ స్థితి నుండి మొత్తం ఆర్డర్ విలువ మరియు వర్తించే పన్నులు వంటి అదనపు విలువలను పొందుతాయి.

మా చెల్లింపు వ్యవస్థ మొత్తం స్వతంత్ర భాగాలలో మొత్తం విలువను చూపించాల్సి ఉంటుంది. బండిని చూపించే సైడ్‌బార్ విడ్జెట్, పోస్ట్-చెక్అవుట్ సమీక్ష స్క్రీన్ మరియు షిప్పింగ్ ఖర్చు కాలిక్యులేటర్ ఉండవచ్చు. చెక్అవుట్ అంశాలను ప్రాప్స్‌గా ఆమోదించిన ఒక అమాయక వ్యవస్థ నకిలీ లాజిక్‌కు ప్రమాదం కలిగిస్తుంది: ప్రతి భాగం మొత్తం ఆర్డర్ విలువను స్వయంగా లెక్కించాలి.

HOC ప్రదర్శన

HOC ఎలా సహాయపడుతుందో చూద్దాం:

import React from "react";import {connect} from "react-redux"; const withCheckout = ComponentToWrap => {  const ComponentWithCheckout = class extends React.Component {  render() { return ( <ComponentToWrap checkoutItems={this.props.checkout.items} checkoutTotal={this.total} {...this.props} /> ); }  get total() { const prices = this.props.checkout.items.map(i => (i.quantity * i.price)); return prices.reduce((a, b) => (a + b), 0); }  }  return connect(({checkout}) => ({checkout}))(ComponentWithCheckout); } export default withCheckout;

ఫైల్ ఒకే ఫంక్షన్‌ను ఎగుమతి చేస్తుంది, withCheckout, ఇది రియాక్ట్ భాగాన్ని దాని ఏకైక పరామితిగా తీసుకుంటుంది (ComponentToWrap). ఫంక్షన్ లోపల, మేము క్రొత్త అనామక తరగతిని సృష్టిస్తాము, అది రియాక్ట్ భాగం.

ఈ క్రొత్త భాగం render పద్ధతి ఒక ఉదాహరణను సృష్టిస్తుంది ComponentToWrap మేము ఫంక్షన్‌కు వెళ్లాము. ఉదాహరణ ఆధారాలను నిర్వచించే అవకాశం ఇప్పుడు మాకు ఉంది. మేము చెక్అవుట్ అంశాల శ్రేణిని ఫార్వార్డ్ చేస్తాము checkoutItems మరియు ముందుగా లెక్కించిన మొత్తం విలువను అందుబాటులో ఉంచండి checkoutTotal.

HOC కి పంపిన అన్ని ఆధారాలు అంతర్గత భాగానికి పంపబడతాయి, ఇది అవసరమైన అన్ని డేటాను అందుకుంటుందని నిర్ధారిస్తుంది. ఫంక్షన్ కొత్తగా సృష్టించిన అనామక తరగతిని తిరిగి ఇస్తుంది, ఇది అప్లికేషన్ అంతటా ఇవ్వడానికి సిద్ధంగా ఉంది.

మేము ఉపయోగిస్తాము connect యొక్క పద్ధతి react-redux కాబట్టి checkout HOC లోపల ఆసరా విలువను పొందుతుంది checkout మా Redux స్టోర్ స్థితిలో కీ. ఇది అమలు వివరాలు: మీ HOC దాని స్థితిని కొనసాగించవచ్చు లేదా అనువర్తనంలో మరొక సేవను సంప్రదించవచ్చు.

HOC ని ఉపయోగించడం

ఇప్పుడు మా HOC ని ఉపయోగించాల్సిన సమయం వచ్చింది.

import React from "react";import withCheckout from "./withCheckout.js"; class CheckoutReviewScreen extends React.Component {  render() { return ( <h1>Checkout</h1> <h2>{this.props.checkoutTotal}</h2> ); } } export default withCheckout(CheckoutReviewScreen);

మేము మాది అనుకుంటాము withCheckout HOC సేవ్ చేయబడింది withCheckout.js మా క్రొత్త చెక్అవుట్ స్క్రీన్ భాగం వలె అదే డైరెక్టరీలో. మాతో భాగాన్ని చుట్టడం withCheckout HOC, మేము మొత్తం ఆర్డర్ విలువను యాక్సెస్ చేయవచ్చు మరియు చూడవచ్చు. మేము దానిని మనమే లెక్కించాల్సిన అవసరం లేదు లేదా అనువర్తన స్థితిలో నిల్వ చేయాల్సిన అవసరం లేదు. మొత్తం ఎలా లెక్కించబడుతుందో మనం ఎప్పుడైనా అప్‌డేట్ చేయాలనుకుంటే (ఉదాహరణకు స్థిర నిర్వహణ రుసుమును జోడించడానికి), మన HOC లో ఒకే చోట మార్పు చేయవలసి ఉంటుంది.

ఇప్పుడు మీరు రెండర్ చేయవచ్చు

మీ అనువర్తనంలో ఎక్కడైనా. మా ప్యాకేజీ ఉదాహరణ మా Redux స్టోర్ నుండి డేటాను లాగుతున్నందున ఎటువంటి ఆధారాలను స్వీకరించాల్సిన అవసరం లేదు. ఎందుకంటే అది చుట్టబడి ఉంటుంది withCheckout, క్రమంగా Redux తో చుట్టబడి ఉంటుంది connect, సమీక్ష స్క్రీన్ స్వయంచాలకంగా ఫైల్‌ను అందుకుంటుంది checkoutTotal ప్రాప్ ఇది అనువర్తన స్థితిలో ఉన్న అన్ని వస్తువుల ధరలను సంక్షిప్తం చేస్తుంది.

ఇప్పుడు మేము మా HOC అని పిలిచేదాన్ని పేర్కొనడం విలువ: withCheckout. సమావేశం ప్రకారం, HOC పేర్లు సాధారణంగా పొడిగింపును కలిగి ఉంటాయి with ఉపసర్గ ఎందుకంటే వారు చుట్టే భాగాలకు ఏదో ఒకదాన్ని జోడిస్తారు. మా విషయంలో, HOC మా చెక్అవుట్ కార్ట్‌కు అనుకూలమైన ప్రాప్యతను అందిస్తుంది, లేకపోతే ప్రతి భాగం లోనూ మేము అమలు చేయాల్సి ఉంటుంది.

HOC ల యొక్క ప్రయోజనాలు

HOC ని ఉపయోగించడం వలన భాగాల నుండి సాధారణ ప్రవర్తనలను సంగ్రహించడానికి, కోడ్ నకిలీని తగ్గించడానికి మరియు నిర్వహణ సామర్థ్యాన్ని పెంచుతుంది. HOC లు డిపెండెన్సీ ఇంజెక్షన్ యొక్క రూపాన్ని అనుమతిస్తాయి. ఇతర భాగాలు బయటి ప్రపంచం నుండి వెళ్ళడానికి అనుమతించడం ద్వారా అవి మీ భాగాలను సరళంగా ఉంచడంలో సహాయపడతాయి.

రియాక్ట్ పర్యావరణ వ్యవస్థలో HOC లు సాధారణం. నిజానికి, మేము ఈ వ్యాసంలో ఒకదాన్ని చూశాము: connect(), భాగంగా react-redux, ఇది మీ భాగాలను Redux స్థితి మార్పులకు చందా చేస్తుంది.

HOC లు ప్రాచుర్యం పొందాయి ఎందుకంటే అవి కోడ్ పునర్వినియోగం యొక్క పద్ధతిని అందిస్తాయి, ఇవి భాగం స్వీయ-నియంత్రణను విచ్ఛిన్నం చేయవు. దుష్ప్రభావాల ప్రమాదం లేకుండా అదనపు కార్యాచరణను జోడించడానికి మిమ్మల్ని అనుమతించడానికి నమూనా రియాక్ట్ యొక్క కంపోజిబిలిటీని ఉపయోగిస్తుంది.

మీరు మీ అనువర్తనం యొక్క ఏదైనా భాగాన్ని దీనికి పంపవచ్చు withCheckout ఏదైనా విచ్ఛిన్నం చేయకుండా: HOC కొన్ని అదనపు ఆధారాలను మాత్రమే దాడి చేస్తుంది. అందువల్ల మీ HOC లు ముందుకు రావడం చాలా ముఖ్యం అన్నీ వారు అందుకున్న ఆధారాలు ({...this.props} మా ఉదాహరణలో). చుట్టిన భాగం యొక్క సాధారణ ఆపరేషన్‌కు అంతరాయం కలిగించే ఏదైనా వారు చేయకూడదు.

మీ భాగాలు ఇప్పుడు మీ HOC పై ఆధారపడి ఉన్నాయని అనిపించవచ్చు. ఈ పరిస్థితి లేదు. మీరు చుట్టబడని భాగం యొక్క రెండవ సంస్కరణను ఎగుమతి చేయవచ్చు, వినియోగదారులకు ఏది ఉపయోగించాలో ఎంపిక ఇస్తుంది.

మీ భాగం వాస్తవానికి కొన్ని ఆధారాలను స్వీకరించమని మాత్రమే నొక్కి చెబుతుంది – checkoutTotal నేను మా కేసు. ఇది HOC చేత అందించబడుతుంది లేదా భాగం ఇవ్వబడిన చోట విలువను దాటడం ద్వారా. మా HOC అభివృద్ధిని సులభతరం చేస్తుంది కాని మా అన్వయించబడిన భాగాల స్వభావాన్ని ప్రాథమికంగా మార్చలేదు.

Source link