लाइफ इन रिएक्ट/रेडक्स में गेम

Question

में बढ़ने में सहायता, मैं प्रतिक्रिया/रेडक्स/जावास्क्रिप्ट में गेम ऑफ लाइफ के एक संस्करण पर काम कर रहा हूं, जबकि मेरे पास यह प्रदर्शन काम कर रहा है, यह भयानक है।

Here is a link to the running game Here's the source on githhub

फिलहाल, मैं हर टिक (उपयोगकर्ता द्वारा अस्थिर 250,500,750ms) प्रत्येक कोशिका के राज्य को अद्यतन करने पर कर रहा हूँ। इसके लिए मैं उन वस्तुओं की एक सरणी के माध्यम से लूपिंग कर रहा हूं जो प्रत्येक सेल का प्रतिनिधित्व करते हैं। प्रत्येक ऑब्जेक्ट के भीतर एक पैरामीटर होता है जिसे स्टेटस कहा जाता है जो जीवित के लिए 1 या मृत के लिए 0 पर एक पूर्णांक हो सकता है।

मैं फिर सेल के चारों ओर उपरोक्त मध्य और निचली पंक्तियों के लिए तीन कोशिकाओं की तीन पंक्तियों में खींच रहा हूं, फिर मैं उन मानों को जोड़ता हूं (सेल को स्वयं केंद्र में छोड़कर)।

तब मैं उस सेल की नई स्थिति का निर्णय लेने के लिए उस नंबर को एक/फिर प्रवाह के माध्यम से चलाता हूं।

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

वास्तविक दृश्य में, प्रत्येक सेल एक प्रतिक्रिया घटक होता है जो ग्रिड कंटेनर से प्रोप के रूप में प्राप्त करता है। मैंने shoulComponentRender() को केवल जीवन को स्थिति में बदलने के बाद सेल को फिर से प्रस्तुत करने के लिए सेटअप किया है।

मुझे लगता है कि ऐप प्रोफाइलिंग (जो मैं बहुत स्पष्ट/अच्छा नहीं हूं) से सोचता हूं कि यह उन सभी मूल्यों की गणना करने की प्रक्रिया है जो चीजों को धीमा कर रही हैं, लेकिन मैं गलत हो सकता हूं और यह प्रतिक्रिया घटक हो सकता है जो मुद्दा पैदा कर रहे हैं।

किसी भी मदद/सहायता की सराहना की!

Answer 1

तो अंत में कभी नहीं एक संतोषजनक स्तर डोम और html घटकों का उपयोग करने के लिए प्रदर्शन मिला है। इसलिए मैंने एचटीएम 5 कैनवास का उपयोग करके सभी कोशिकाओं को प्रस्तुत करने के लिए ग्रिड कोड को फिर से लिखा और प्रदर्शन अब कोई मुद्दा नहीं है, वास्तव में यह अब आईफोन पर काफी खुशी से प्रस्तुत करता है।

Answer 2

मुझे लगता है कि यह मुद्दा हो सकता है। रूपरेखा तक हम देखते हैं:

आप एक नियमित अंतराल के साथ काम करने के फटने, प्रत्येक 85ms के बारे में है जो बहुत असामान्य है ले रही है। कॉल-स्टैक को देखते हुए triggerTimer और बाद में startTimer फ़ंक्शन कॉल होता है।

इनके लिए स्रोत कोड देख रहे हैं: https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12।

आपको इस स्थिति में startTimer से वापस लौटने की आवश्यकता है। अन्यथा triggerTimer और startTimer एक-दूसरे को जितनी तेजी से बार-बार कॉल कर सकते हैं, वे हर बार नए टाइमआउट को जन्म देते हैं।

पहले

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
     this.props.stepState(); 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
    } 

    triggerTimer(){ 
    this.startTimer(); 
    } 

बाद

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
    this.props.stepState(); 
    // Return here 
    return; 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
} 

triggerTimer(){ 
    this.startTimer(); 
}