अभिक्रिया Redux में घटक और कंटेनर के बीच अंतर क्या है?
जवाबों:
Componentरिएक्ट एपीआई का हिस्सा है। एक घटक एक वर्ग या फ़ंक्शन है जो एक प्रतिक्रिया UI के भाग का वर्णन करता है।
कंटेनर एक रिएक्ट घटक के लिए एक अनौपचारिक शब्द है जो कि connectएक रेडक्स स्टोर के लिए है। कंटेनरों को Redux स्टेटस अपडेट और dispatchएक्शन मिलते हैं , और वे आमतौर पर DOM तत्वों को रेंडर नहीं करते हैं; वे प्रस्तुतीकरण बाल घटकों को प्रस्तुत करते हैं।
अधिक विस्तार के लिए डैन अब्रामोव द्वारा प्रस्तुति बनाम कंटेनर घटकों को पढ़ें ।
घटक जो डेटा लाने और प्रदर्शित करने के लिए जिम्मेदार है, उसे स्मार्ट या कंटेनर घटक कहा जाता है। डेटा Redux, किसी भी नेटवर्क कॉल या थर्ड पार्टी सब्सक्रिप्शन से आ सकता है।
डंब / प्रेजेंटेशनल घटक वे हैं जो प्राप्त प्रॉप्स के आधार पर दृश्य प्रस्तुत करने के लिए जिम्मेदार हैं।
उदाहरण के साथ अच्छा लेख यहाँ
https://www.cronj.com/blog/difference-container-component-react-js/
घटक दृश्य का एक प्रकार का निर्माण करते हैं, इसलिए इसे DOM तत्वों को प्रस्तुत करना चाहिए, स्क्रीन पर सामग्री डालनी चाहिए।
कंटेनर डेटा विस्तार में भाग लेते हैं, इसलिए इसे रिडक्स के साथ "बात" करनी चाहिए, क्योंकि इसे राज्य को संशोधित करने की आवश्यकता होगी। तो, आप को शामिल करना चाहिए कनेक्ट (प्रतिक्रिया-redux) क्या यह कनेक्शन, और कार्यों में आता है mapStateToProps और mapDispatchToProps :
.
.
.
import { connect } from "react-redux";
class myContainer extends Component {
}
function mapStateToProps(state) {
// You return what it will show up as props of myContainer
return {
property: this.state.property
};
}
function mapDispatchToProps(dispatch) {
// Whenever property is called, it should be passed to all reducers
return bindActionCreators({ property: property }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(myContainer);अवयव
घटक आपको यूआई को स्वतंत्र, पुन: प्रयोज्य टुकड़ों में विभाजित करते हैं, और अलगाव में प्रत्येक टुकड़े के बारे में सोचते हैं। उन्हें कभी-कभी "प्रस्तुतित्मक घटक" कहा जाता है और मुख्य चिंता यह है कि चीजें कैसे दिखती हैं
कंटेनर
कंटेनर यूआई के बिना घटकों की तरह हैं और कंटेनर काम करने के तरीके से चिंतित हैं । । यह मुख्य रूप से डेटा प्राप्त करने और अद्यतन करने के लिए रेडक्स स्टोर से बात करता है
Redux doc से तालिका तुलना देखें
विस्तृत विवरण https://redux.js.org/basics/usage-with-react#pretational-and-container-compenders
वे दोनों घटक हैं; कंटेनर कार्यात्मक होते हैं, इसलिए वे किसी भी HTML को अपने आप प्रस्तुत नहीं करते हैं, और फिर आपके पास प्रस्तुतिकरण घटक भी होते हैं, जहां आप वास्तविक HTML लिखते हैं। कंटेनर का उद्देश्य राज्य का नक्शा बनाना और प्रेजेंटेशनल घटक के लिए प्रॉप्स को भेजना है।
आगे पढ़े: लिंक
प्रतिक्रिया, Redux स्वतंत्र पुस्तकालय हैं।
प्रतिक्रिया आपको HTML दस्तावेज़ बनाने के लिए एक रूपरेखा प्रदान करती है। घटक एक तरह से दस्तावेज़ के किसी विशेष भाग का प्रतिनिधित्व करते हैं। एक घटक से जुड़े तरीके फिर दस्तावेज़ के बहुत ही विशेष भाग में हेरफेर कर सकते हैं।
Redux एक ढांचा है जो JS के वातावरण में डेटा के भंडारण और प्रबंधन के लिए एक विशिष्ट परोपकार के लिए निर्धारित है। यह परिभाषित विधियों के साथ एक बड़ी जेएस वस्तु है, सबसे अच्छा उपयोग मामला एक वेब ऐप के राज्य प्रबंधन के रूप में आता है।
चूंकि रिएक्ट बताता है कि सभी डेटा को जड़ से पत्तियों तक नीचे जाना चाहिए, यह मुख्य रूप से सभी प्रॉप्स के लिए थकाऊ हो जाता है, घटकों में प्रॉप्स को परिभाषित करता है और फिर कुछ प्रॉप्स को बच्चों को पास करता है। यह संपूर्ण अनुप्रयोग स्थिति को भी असुरक्षित बनाता है।
रिएक्ट Redux एक स्वच्छ समाधान प्रदान करता है, जहां यह सीधे Redux स्टोर से जुड़ता है, केवल एक और रिएक्ट कंपोनेंट (अपने Container) के आसपास जुड़े घटक को लपेटकर । आपके क्रियान्वयन के बाद से, आपके कार्यान्वयन ने आपको पहले ही परिभाषित कर दिया है कि आपको पूरे एप्लिकेशन राज्य का कौन सा टुकड़ा चाहिए। इसलिए connectउस डेटा को स्टोर से बाहर ले जाता है और इसे उस घटक के पास ले जाता है, जहां यह खुद को लपेटता है।
इस सरल उदाहरण पर विचार करें:
class Person extends Component {
constructor(props){
this.name = this.props.name;
this.type = this.props.type;
}
render() {
return <p> My name is {this.name}. I am a doctor { this.type } </p>
}
}
const connect = InnerComponent => {
class A extends Component{
render() {
return <InnerComponent {...this.props} type="Doctor"/>
}
}
A.displayName = `Connect(${InnerComponent.displayName})`
return A
}connectसमारोह एक प्रस्ताव पारित करता है type।
इस तरह एक कनेक्ट व्यक्ति घटक के लिए कंटेनर के रूप में कार्य करता है।
रिएक्ट के दो मुख्य घटक हैं पहला स्मार्ट घटक (कंटेनर) और दूसरा गूंगा (प्रस्तुति घटक) है। कंटेनर घटकों के बहुत समान हैं, केवल अंतर यह है कि कंटेनर एप्लिकेशन स्थिति से अवगत हैं। यदि आपके वेबपेज का हिस्सा केवल डेटा (डंब) प्रदर्शित करने के लिए उपयोग किया जाता है, तो इसे एक घटक बनाएं। यदि आपको एप्लिकेशन में स्मार्ट और राज्य के बारे में पता होना चाहिए (जब भी डेटा बदलता है) तो इसे एक कंटेनर बनाएं।