मैं किसी घटक को अनमाउंटिंग/रीमाउंट करने से प्रतिक्रिया को कैसे रोक सकता हूं?

Question

मैं react-router और react-redux का उपयोग कर रहा हूं। मैं दो मार्गों इस तरह है:

<Route path='/edit'  component={ EditNew } /> 
<Route path='/edit/:id' component={ EditDraft } /> 

जहां EditNew और EditDraft कि एक Editor घटक लपेट डेटा उपलब्ध कराने के कंटेनर react-reduxconnect फ़ंक्शन का उपयोग कर रहे हैं:

const EditNew = connect(state => ({}))(React.createClass({ 
    render() { 
     return <Editor />; 
    } 
})); 

और

const EditDraft = connect(state => ({ drafts: state.drafts }))(React.createClass({ 
    render() { 
     const { params, drafts } = this.props; 
     const draft = findDraft(params.id, drafts); 
     return <Editor draft={ draft } />; 
    } 
})); 

अब , Editor इस तरह से परेशान है कि जब आप एक ब्लैन में टाइप करना शुरू करते हैं के Editor, यह /edit से /edit/:id को एक रनोली जेनरेट आईडी के साथ ट्रिगर करता है।

• EditorNew unmounts
• Editor unmounts
• EditorDraft renders और mounts
• Editor renders और mounts

जब मैं इन दो कोडित: जब ऐसा होता है, मैं घटनाओं के निम्न क्रम मिल कंटेनर, मैंने सोचा कि Editor उनमें से दोनों में निहित घटक बिना किसी समझौता किया जाएगा अनमाउंटिंग और रिमाउंटिंग। अतिरिक्त अनावश्यक काम के अलावा कई कारणों से यह मेरे लिए समस्याग्रस्त है, जिनमें से प्रमुख हैं कि संपादक अनमाउंट और रिमाउंट के बाद फोकस और उचित कर्सर रेंज खोने के समाप्त होते हैं।

कोई लाभ नहीं हुआ मैं Editor घटक सुलह प्रणाली है कि यह एक ही घटक है करने के लिए संकेत करने के लिए के लिए key निर्दिष्ट करने की कोशिश की है करने के लिए

, और मैं shouldComponentUpdate की कोशिश की है, लेकिन यह कहा जाता है नहीं होता है, जो दी भावना क्या प्रतिक्रिया है बनाता है करते हुए।

दो कंटेनरों को एक जटिल कंटेनर render() तर्क के साथ एक कंटेनर में जोड़ने के अलावा, क्या मैं कुछ भी कर सकता हूं जो Editor घटक को इतिहास संक्रमण के दौरान अनमाउंटिंग/रीमाउंटिंग से रोकने के लिए कर सकता है?

Answer 1

React’s Reconciliation Algorithm का कहना है कि तत्व एक अलग प्रकार का है, तो प्रतिक्रिया (इस मामले, EditNew और EditDraft में) "पुराने पेड़ फाड़ और निर्माण होगा अगर स्क्रैच से नया पेड़। "

इसे रोकने के लिए, आपको दोनों मार्गों के लिए एक ही घटक का उपयोग करने की आवश्यकता है।

Answer 2

आप shouldComponentUpdate का उपयोग करें और, कर सकते हैं अगर मार्ग /edit से /edit/:id में बदल गया है (आप जाँच कर सकते हैं यह आपके घटक से जुड़े राज्य से रूटर जानकारी प्राप्त करने) रिटर्न फाल्स, तो यह घटक ताज़ा नहीं होंगे।

Answer 3

संभावना है कि react-router < = v3 के साथ यह संभव नहीं है।

react-router v4 के साथ

, यह अब संभव हो जाना चाहिए: https://github.com/ReactTraining/react-router/issues/4578