प्रतिक्रिया: अभिभावक घटक सभी बच्चों को फिर से प्रस्तुत करता है, यहां तक ​​कि जो लोग राज्य परिवर्तन

Question

पर नहीं बदला है, मुझे इस बारे में स्पष्ट उत्तर नहीं मिला है, उम्मीद है कि यह दोहराया नहीं जा सकता है।

मैं एक साधारण चैट ऐप के लिए रिएक्ट + रेडक्स का उपयोग कर रहा हूं। ऐप में इनपुटबार, संदेशसूची और कंटेनर घटक शामिल है। कंटेनर (जैसा कि आप कल्पना कर सकते हैं) अन्य दो घटकों को लपेटता है और दुकान से जुड़ा हुआ है। मेरे संदेशों की स्थिति, साथ ही वर्तमान संदेश (वर्तमान में जो संदेश उपयोगकर्ता टाइप कर रहा है) रेडक्स स्टोर में आयोजित किया जाता है। सरलीकृत संरचना:

class ContainerComponent extends Component { 
    ... 
    render() { 
    return (
     <div id="message-container"> 
     <MessageList 
      messages={this.props.messages} 
     /> 
     <InputBar 
      currentMessage={this.props.currentMessage} 
      updateMessage={this.props.updateMessage} 
      onSubmit={this.props.addMessage} 
     /> 
     </div> 
    ); 
    } 
} 

वर्तमान संदेश को अद्यतन करते समय मुझे जो समस्या हो रही है। वर्तमान संदेश को अपडेट करने से एक ऐसी क्रिया ट्रिगर होती है जो स्टोर को अद्यतन करती है, जो कंटेनर के माध्यम से गुजरने वाले प्रोप को अपडेट करती है और इनपुटबैर घटक पर वापस जाती है।

यह काम करता है, हालांकि एक दुष्प्रभाव यह है कि मेरे संदेश सूची घटक हर बार फिर से प्रस्तुत किया जा रहा है। MessageList को वर्तमान संदेश प्राप्त नहीं होता है और उसके पास अपडेट करने का कोई कारण नहीं है। यह एक बड़ा मुद्दा है क्योंकि एक बार संदेशसूची बड़ा हो जाने पर, ऐप हर बार वर्तमान संदेश अपडेट धीमा हो जाता है।

मैंने इनपुटबैर घटक (इसलिए पूरी तरह से रेडक्स आर्किटेक्चर को अनदेखा कर रहा है) में वर्तमान संदेश स्थिति को सेट और अपडेट करने का प्रयास किया है और समस्या को "ठीक करता है", हालांकि यदि संभव हो तो मैं रेडक्स डिज़ाइन पैटर्न से चिपकना चाहता हूं।

मेरे सवाल कर रहे हैं: एक माता पिता के घटक अद्यतन किया जाता है

• हैं, तो हमेशा उस घटक के भीतर सभी प्रत्यक्ष बच्चों को अद्यतन प्रतिक्रिया करता है?

• यहां सही दृष्टिकोण क्या है?

Answer 1

तो एक माता पिता के घटक अद्यतन किया जाता है, हमेशा उस घटक के भीतर सभी प्रत्यक्ष बच्चों को अद्यतन प्रतिक्रिया करता है?

सं प्रतिक्रिया केवल एक घटक फिर से प्रस्तुत करना होगा shouldComponentUpdate() रिटर्न true है। डिफ़ॉल्ट रूप से, यह विधि हमेशा नए लोगों के लिए किसी भी सूक्ष्म बग से बचने के लिए true लौटाती है (और जैसा कि विलियम बी ने इंगित किया है, डीओएम वास्तव में अपडेट नहीं करेगा जब तक कुछ बदल नहीं जाता है, प्रभाव को कम करता है)।

अपने उप-घटक को अनावश्यक रूप से पुनः प्रस्तुत करने से रोकने के लिए, आपको shouldComponentUpdate विधि को इस तरह से कार्यान्वित करने की आवश्यकता है कि डेटा वास्तव में बदल गया है जब यह true लौटाता है। this.props.messages हमेशा होता है, तो एक ही सरणी, यह इस रूप में सरल हो सकता है:

shouldComponentUpdate(nextProps) { 
    return (this.props.messages !== nextProps.messages); 
} 

तुम भी गहरी तुलना या संदेश आईडी या कुछ और की तुलना में किसी प्रकार का क्या करना चाहते हो सकता है, यह अपनी आवश्यकताओं पर निर्भर करता है।