Loading...

React in Hindi – Render Props

  • Introduction to react render props in Hindi
  • Example of react render props in Hindi

Introduction to React Render Props

Render prop एक ऐसी technique है जिसके द्वारा React components के बीच code share किया जाता है। इसके लिए एक special prop का प्रयोग किया जाता है जिसे render prop कहा जाता है। इस prop की value एक function होता है।

<MyComponent render={myFunction} />

Render prop के रूप में pass किए जाने वाला function एक React element return करता है।

Render function में component का ख़ुद का render logic implement करने की बजाय render prop के रूप में pass किए गए function को call किया जाता है और एक valid argument pass किया जाता है। इससे function द्वारा return किया जाने वाला React element render होता है।

{this.props.render(functionArgument)} 

React Router और Downshift libraries render props का प्रयोग करती है।

Sharing Code Using Render Props

React में components primary data unit होते है। जब data sharing या code reuse की बात आती है तो कई techniques React में available है।

उदाहरण के लिए एक component का data दूसरे component में share करने के लिए उसे दूसरे component के child के रूप में define किया जाता है।

<FirstComponent {...props} >
  <SecondComponent />
</FirstComponent>

हालाँकि इस approach से code reuse सम्भव है। लेकिन मान लीजिए यदि आप बहुत अधिक components में code share करना चाहते है जो की अलग अलग files में available है तो यह technique काम नहीं करेगी।

साथ इस technique में share की जाने वाली functionality component से अलग नहीं इसलिए component को independently use करना मुश्किल है।

इस situation में render props के प्रयोग से functionality को separate करते हुए और बिना components को child के रूप में render किए आप code को share कर सकते है।

आइए इसे एक उदाहरण द्वारा समझने का प्रयास करते है। मान लीजिए आपने Student और Teacher दो components define किए है। ये दोनो ही components props के रूप में student और receive का नाम receive करते है और welcome message show करते है।

क्योंकि दोनो ही components same code को implement कर रहे है। इसलिए यँहा पर code को एक function के रूप में implement किया जा सकता है।

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

इसके बाद इस function को render prop के प्रयोग से दोनो components को pass किया जा सकता है और उनके render function में इस function को call करके name argument pass किया जा सकता है।

function Student(props){
  return (props.render('Reader'))
}

function Teacher(props){
  return (props.render('BHT'))
}

जब इन दोनो components को render करवाया जाएगा तो इनमें pass किया गया function call होगा welcome message show होगा।

function App(){
  return(
    <div>
      <Student render={Welcome} />
      <Teacher render={Welcome} />
    </div>
  )

}

इसी प्रकार और भी कई महत्वपूर्ण functionalities render props के माध्यम से components के बीच share की जा सकती है।

Render Props is a Pattern

Render props एक pattern है। इसलिए इस pattern को use करने के लिए यह आवश्यक नहीं है की आप सिर्फ़ render नाम की ही prop use कर सकते है।

ऐसी कोई भी prop जो की function है और जिसे component यह बताने के लिए use करता है render() function द्वारा क्या render करना render prop कहलाती है।

उदाहरण के लिए ऊपर बताए गए उदाहरण में Student और Teacher components में render नाम की prop define करने के बजाय Hello नाम की prop define की जा सकती है और फिर भी render prop ही होती।

<div>
   <Student Hello={Welcome} />
   <Teacher Hello={Welcome} />
</div>

Render Props with React.PureComponent

यदि render props का प्रयोग एक pure component के लिए किया जाता है तो इससे pure component के साथ available features खो जाते है।

एक pure component वह component होता है जो same props और state के साथ हमेशा same ही output return करता है।

मान लीजिए यदि Student और Teacher components को pure component के रूप में implement किया जाए और फिर उनके साथ render prop का प्रयोग किया जाए तो वे pure component नहीं रह जाएँगे।

ऐसा इसलिए होगा क्योंकि shallow prop comparison हमेशा false return करेगा और हर render के दौरान render prop के लिए एक नयी value generate की जाएगी।

हालाँकि इस समस्या से बचने के लिए render prop की value को एक instance method के रूप में define किया जा सकता है।

<Student render={this.Welcome} />  // Welcome is a instance method. 

इससे shallow prop comparison हमेशा true होगा और renders के दौरान prop की value change नहीं होगी।