React Native/Redux uygulamasındaki olası gezinme sorunu

Question

Redux'u kullanarak tüm ziyaret edilen sahneleri (gezinme yığınından sahneler) kullanarak büyük React Native uygulamasında gezinme sırasında takılı kalıyor. Tüm bu sahneler sahne alır ve son sahne bileşeninden herhangi bir eylem gönderildiğinde ziyaret edildikleri sıraya göre işlenir. Gönderme ve son sahne oluşturma arasında donmalar ve görünür gecikmelere neden olur.

Gezinme için react-native-router-flux kullanıyorum ama aynı sorun orijinal React Native Navigator ile de oluyor.

video Possible navigation issues in React Native/Redux app

Kod react-redux-navigation-test

navigasyon zincirinden bileşenleri odaklı değil geçerek sahne önlemek için bilmek güzel olurdu.

Şu anda, her bir bileşenin odaklanmış (görünür) olması ve tersi durumda false değerinin döndürülmesi durumunda CheckComponentUpdate öğesini kontrol ediyorum.

Daha iyi bir çözüm var mı?

Answer 1

Tepki-yerel yönlendirici-flux'ı kullanmadım, ancak oldukça büyük bir React Native ve Redux uygulamasıyla deneyimim var. Bazen, çalıştığınız verilerin yeterince geniş olması durumunda fark edilebilir gecikmelere neden olabileceğini, ancak bunların çoğunlukla geliştirme aşamasında sınırlı olduğunu fark ettim. Uygulama oluşturulduğunda genellikle fark edilir derecede daha hızlıdır. Redux, geliştirme ve üretim modlarında bazı şeyleri biraz farklı yapıyor gibi görünüyor.

Gezinme yığınındaki sahneler hala takılıyken, yani tasarıma göre. Başka bir ekrana navigator.push görüntülediğinizde, önceki ekranlar currentRouteStack'dan atılana veya 'dan değiştirilene kadar takılı kalır.

Ayrıca, simülatörünüzün Slow Animations modunda olduğunu da unutmayın. Bunu video uğruna yapıp yapmadığınızdan emin değilsiniz, ancak navigasyon yavaşlığı bunun bir parçası olduğundan dolayı. Amaca uygun olmayan durumlarda sadece bir kafa.

Uygulama oluşturulduktan sonra uygulamanın nasıl çalıştığını denetler ve performans sorunlarını daha fazla gidermeden önce geliştirme modunda değildir. Son uygulama ürünü için bir sorun olmayabilir.

Answer 2

Geçerli sahne ve sahne içindeki gezinme dizini ve başlık oluşturma yöntemleri kullanılarak oluşturulan sahne arasındaki sahne mesafesini hesaplamanızı öneririz. Eğer mesafe> 1 null olursa.

Bu, tüm gezinme geçmişini oluşturmayı engellemelidir. Bu tür davranışların kutudan çıkarılmaması bana bir anlam ifade etmiyor, ama işte burada.

Answer 3

Burada bir uzvun dışına çıkacağım, ancak yeniden oluşturmayı önlemek için aşağıdaki yöntemlerden birini mi kullanıyorsunuz?

• PureComponents
• Elle sığ olan shouldComponentUpdate yöntemi ile sahne ve devlet karşılaştırmak (ilave 15.3 bence tepki).

Varsayılan olarak, recoComponentUpdate ile doğru şekilde işlemezseniz, React tüm bileşenleri güncelleştirmenin ardından yeniden işleyecektir.

Benzer bir şey yapıyor ve (eğer resetto veya resetnavigation kullanmadıkça bileşenleri kaldırılan değildir çünkü) tüm navigasyon yığını deposuna bağlı olduğunu tüm

Answer 4

sorun gerçekten de bu konuları yemiyorum

Burada değerinde olan şey şu an yaptığım şey. Ben görünümde olmayan sahneler için güncelleştirmeleri atlar biraz tepki modifiye redux uygulanması ile çalışıyoruz

Kullanmak için (aşağıya bakınız) yapmanız gerekir:

Mağaza bağlamında bir bileşeni ağaç için rota

Bu

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

için bir sarıcı yarattı Ve de sahneyi

sunumu kullanarak

Daha sonra bir bileşenin oluşturulduğu rotaya erişebilirsiniz.

Mağaza Biz bileşen başka bir bileşen olarak oluşturulduğunda eğer, bu güncellemeleri atlayacaktır bu biraz değiştirilmiş tepki-redux bağlamak işlevini kullanabilirsiniz

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

Sonra yapılandırmak sahnesinde bu kodu kullanmak bir singleton navigasyon yığını ağaç sonra halen bir (veya benzer uygulama) https://github.com/reactjs/react-redux/compare/master...ganmor:master

paketlemek mümkün olabilir görüntülenen ama bunu içine bakmak zamanım olmadı. Eğer kimse bunu yapmaktan hoşlanırsa ...

Answer 5

Bir bileşendeki tüm ekranları sarmalayarak çözdüm.

Tüm ekranı saran bir ScreenView bileşenimiz var ve buna "restrictRerendersToRoutes" parametresini iletiyoruz.

Bu ekran duruma bağlı ve mevcut durumdaki currentScrene'i güncelleriz ve bu ekran görüntüsüne sunarız.

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

    return true; 
    }