रिएक्ट नेटिव/रेडक्स ऐप में संभावित नेविगेशन समस्या

Question

रेडक्स का उपयोग करने के साथ बड़े रिएक्ट नेटिव ऐप में नेविगेशन के दौरान सभी विज़िट किए गए दृश्य (नेविगेशन स्टैक से दृश्य) घुड़सवार रह रहे हैं। इन सभी दृश्यों को प्रोप प्राप्त होते हैं और जब वे अंतिम दृश्य घटक से किसी भी कार्रवाई को प्रेषित किया जाता है तो उस क्रम में प्रस्तुत किया जाता है। यह प्रेषण और अंतिम दृश्य प्रतिपादन के बीच फ्रीज और दृश्य विलंब का कारण बनता है।

नेविगेशन के लिए मैं react-native-router-flux का उपयोग कर रहा हूं लेकिन मूल प्रतिक्रिया मूल नेविगेटर के साथ भी यही समस्या होती है।

वीडियो Possible navigation issues in React Native/Redux app

कोड react-redux-navigation-test

जानते हैं कि कैसे गुजर रंगमंच की सामग्री नेविगेशन श्रृंखला से ध्यान केंद्रित घटकों नहीं करने के लिए रोकने के लिए करने के लिए अच्छा नहीं होगा।

फिलहाल मैं प्रत्येक घटक के कॉम्पोनेंट अपडेट की जांच कर रहा हूं यदि यह केंद्रित है (दृश्यमान) और विपरीत मामले में झूठी वापसी।

क्या कोई बेहतर समाधान है?

Answer 1

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

नेविगेशन स्टैक में दृश्यों के बारे में अभी भी माउंट किया जा रहा है, जो डिज़ाइन द्वारा है। यहां तक ​​कि जब आप navigator.push किसी अन्य स्क्रीन पर तब भी पिछली स्क्रीन तब तक घुड़सवार रहती हैं जब तक वे currentRouteStack से पॉप नहीं हो जाते हैं या currentRouteStack से प्रतिस्थापित नहीं होते हैं।

इसके अलावा, यह संभवतः यह ध्यान देने योग्य है कि आपका सिम्युलेटर धीमे एनिमेशन मोड में है। सुनिश्चित नहीं है कि आपने वीडियो के लिए ऐसा किया है या नहीं, लेकिन इसके कारण नेविगेशन धीमापन कुछ हद तक है। अगर उद्देश्य पर नहीं था तो बस एक सिर ऊपर।

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

Answer 2

मैं अनुशंसा करता हूं कि आप दृश्य दृश्य और शीर्षलेख प्रतिपादन विधियों में नेविगेशन इंडेक्स का उपयोग करके वर्तमान दृश्य और दृश्य के बीच दृश्य दूरी की गणना करें। यदि दूरी> 1 वापसी शून्य।

यह पूरे नेविगेशन इतिहास को प्रस्तुत करने से रोकना चाहिए। यह मुझे कोई समझ नहीं आता है कि इस प्रकार का व्यवहार बॉक्स से बाहर नहीं है, लेकिन वहां है।

Answer 3

मैं यहां एक अंग पर बाहर जा रहा हूं लेकिन क्या आप पुनः प्रतिपादन को रोकने के लिए निम्न विधियों में से एक का उपयोग कर रहे हैं?

• PureComponents (में जोड़ा प्रतिक्रिया 15.3 मुझे लगता है कि)
• उथले साथ मैन्युअल shouldComponentUpdate विधि के साथ रंगमंच की सामग्री और राज्य की तुलना करें।

डिफ़ॉल्ट रूप से प्रतिक्रिया तब तक सभी घटकों को फिर से प्रस्तुत करेगी जब तक कि आप सही ढंग से shouldComponentUpdate को संभाल नहीं लेते।

मैं ऐसी ही कुछ कर रहा हूँ और सभी

Answer 4

समस्या वास्तव में है कि पूरे नेविगेशन ढेर दुकान से जुड़ा है पर इन मुद्दों को नहीं होने (क्योंकि घटकों को अनमाउंट जब तक आप resetto या resetnavigation का उपयोग नहीं कर रहे हैं)

इसके लिए यहां क्या है इसके लिए मैं अभी क्या कर रहा हूं। मैं एक थोड़ा संशोधित प्रतिक्रिया redux कार्यान्वयन कि परदे के उस दृश्य में नहीं हैं के लिए अद्यतन को छोड़ देता है के साथ काम कर रहा है (नीचे देखें)

इसका इस्तेमाल करने के लिए आप की जरूरत है:

स्टोर संदर्भ में एक घटक के पेड़ के लिए मार्ग

हम इस

const CurrentRoute = React.createClass({ 
childContextTypes : { currentRoute: PropTypes.object }, 
getChildContext() { 
return { currentRoute: this.props.route } 
}, 
render() { return this.props.children; } 
}) 

के लिए एक आवरण बनाया और यह में दृश्य

प्रस्तुत करना का उपयोग करें

फिर आप उस मार्ग तक पहुंच सकते हैं जिसमें एक घटक प्रस्तुत किया गया है।

स्टोर एक सिंगलटन में नेविगेशन ढेर हम कॉन्फ़िगर दृश्य में इस कोड का उपयोग

let routeStack = []; 
export const updateRouteStack = stack => routeStack = stack; 

फिर अगर घटक एक और घटक में प्रदान की गई है तो आप इस थोड़ा संशोधित प्रतिक्रिया-redux कनेक्ट समारोह का उपयोग कर सकते हैं, यह अद्यतन को छोड़ देगा पेड़ तो वर्तमान में एक (या किसी ऐसे ही कार्यान्वयन) https://github.com/reactjs/react-redux/compare/master...ganmor:master

यह इस पैकेज के लिए संभव हो सकता है दिखाया गया है, लेकिन मैं समय इस पर गौर करने के लिए नहीं था। अगर कोई इसे करने जैसा महसूस करता है .. आशा है कि

Answer 5

हमें किसी घटक में बस सभी स्क्रीन को लपेटकर हल किया गया है।

हमारे पास एक स्क्रीन व्यू घटक है जो पूरी स्क्रीन को लपेटता है, और हम इसे पैरामीटर "प्रतिबंधित रेंडरर्स रूट्स" पास करते हैं।

यह स्क्रीन राज्य से जुड़ा हुआ है, और हम अपने राज्य में वर्तमानस्क्रीन अपडेट करते हैं और इसे इस स्क्रीन दृश्य में बेनकाब करते हैं।

तो हम बस rerenders प्रतिबंधित जब स्क्रीन इस shouldComponentUpdate कार्यान्वयन के साथ पृष्ठभूमि में है:

shouldComponentUpdate(nextProps) { 
    if (!_.empty(this.props.restrictRerendersToRoutes)) { 
     return !!this.props.restrictRerendersToRoutes 
     .find((routeKey) => routeKey === nextProps.currentScene.name); 
    } 

    return true; 
    }