सभी इतिहास राज्यों के लिए प्रतिक्रिया-राउटर मार्ग-घटक रखें

Question

मैं कॉर्डोवा के साथ एक मोबाइल एप्लिकेशन करता हूं। "कार्ड डेक" एनीमेशन को लागू करने के लिए react-router@2.0.0 + ReactCSSTransitionGroup का उपयोग करें। सर्कुलर लिंक की संभावना के बिना मेरे पास सख्त रूट पेड़ हैं।

प्रदर्शन को बेहतर बनाने और पिछले मार्ग-घटकों की स्थिति को बचाने के लिए, मैं केवल उन सभी के इतिहास को पॉप-स्टेट या प्रतिस्थापन-राज्य पर अनमाउंट करने के साथ रखना चाहता हूं।

यह कैसे करें?

Answer 1

क्या आप वाकई यह वास्तव में मदद करेंगे? अगर मुझे आपकी बात मिलती है, तो आप घटकों को "कैश" करना चाहते हैं ताकि जब आप किसी मौजूदा मार्ग पर फिर से जाएं, तो डीओएम संरचना को फिर से बनाने की कोई आवश्यकता नहीं है (मुझे लगता है कि आयनिक के पास ऐसा करने का विकल्प है)।

मुझे यकीन नहीं है कि आपको कितना लाभ मिलेगा क्योंकि रिएक्ट वर्चुअल डीओएम कार्यान्वयन का उपयोग करता है जो पहले से ही एक कुशल तरीके से डीओएम को अपडेट करना चाहिए। जब आप किसी रूट से दूसरे स्थान पर संक्रमण करते हैं, तो वास्तविक डोम और आपके प्रतिक्रिया प्रतिनिधित्व के साथ भिन्नता के अनुसार केवल न्यूनतम डोम नोड्स बदल दिए जाएंगे।

आप ताकि आप इसे हर बार पुनर्गणना के लिए की जरूरत नहीं है अपने घटकों के राज्य "कैश" चाहते हैं, तो यह बहुत आसान डेटा से आपको अवगत करवाने redux और reselect (https://github.com/reactjs/reselect) की तरह कुछ का उपयोग किया जाएगा आवश्यकता होने पर केवल अपने घटकों को दें, मूल रूप से राज्य को अपने घटकों से बाहर निकालने को पूरा करें। तब आपका राज्य एक घटक के अनमाउंट से बच जाएगा।

अचयनित करने के लिए फ़ंक्शन ज्ञापन का उपयोग करता है, जब आप इसकी आवश्यकता होती है तो केवल आपके घटकों को पास करने वाले प्रोप को पुन: गणना करने के लिए उपयोग करते हैं, क्योंकि प्रत्येक बार कुछ बदल गया है।

Answer 2

शायद रूट रूट को कॉन्फ़िगर करते समय आप onEnter और onChange कॉलबैक का लाभ उठा सकते हैं।

ऑनलाइन कॉलबैक पर आप प्रारंभिक मार्ग पथ रिकॉर्ड कर सकते हैं। ऑन चेंज कॉलबैक में आप cur/next रूट पथ की तुलना कर सकते हैं, रिकॉर्ड किए गए पथ इतिहास की जांच कर सकते हैं, और पथ रिकॉर्ड कर सकते हैं। इसके बाद से जब आप मार्ग परिवर्तन हर बार मार्ग पथ की जांच और तुलना कर सकते हैं, तो आप किसी भी परिपत्र लिंक को रोक सकते हैं।

यदि आप रेडक्स का उपयोग करते हैं, तो सभी घटक की स्थिति को सहेजने के बारे में, संपूर्ण ऐप स्थिति ऑब्जेक्ट, रेडक्स स्टोर में सहेज सकती है।

यदि आप छुट्टी से पहले उस समय घटक की स्थिति को सहेजना चाहते हैं, तो आप save component statecomponentWillUnmount में कार्रवाई भेज सकते हैं, और componentWillMount में स्थिति पुनर्प्राप्त कर सकते हैं।

यहाँ एक टुकड़ा है:

var rootRoute = { 
    path: '/', 
    onEnter: enter, 
    onChange: change, 
    component: MyApp, 
    indexRoute: { component: Home }, 
    childRoutes: [ 
     LoginRoute, 
     ... 
     {path: 'home', component: Home}, 
     { 
      path: '*', 
      component: NotFound 
     } 
    ] 
}; 

function enter (next) { 
    // pathStore record all navigation history 
    pathStore.record(next.location.pathname); 
} 
function change (cur, next, c) { 
    // when hit cur path links in nav, pathname is same, key is different. 
    if (cur.location.pathname !== next.location.pathname) { 
     ... 
    } 
}