Niedrige Leistung in Reactive Native mit Redux

Question

Ich habe einige Probleme mit der Leistung in meiner nativen App reagiert. Es scheint durch das Redukt-Bündel verursacht zu sein.

Wie Sie im Video

Redux/Flux/setState comparing

gibt es eine erhebliche Verzögerung zwischen Aktion und Dispatching Ansicht Rendering sehen können. Auf realen Geräten sieht es noch schlimmer aus. In diesem Beispiel gibt es keine API-Aufrufe. Nur einfache Aktionen werden gesendet und Änderungen werden vorgenommen. Auf der anderen Seite arbeiten Facebook Flux-Implementierung und einfacher Aufruf von SetState viel schneller.

Haben Sie Ideen, wie Sie die Leistung der App verbessern können?

ich bin mit reagieren: v15.2.1, reagieren-native: v0.29.2, reagieren-redux: v4.4.5,

Ansicht

import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import {Map} from 'immutable'; 

import * as testActions from '../reducers/test/testActions'; 
import {Actions} from 'react-native-router-flux'; 

const actions = [ 
    testActions 
]; 

function mapStateToProps(state) { 
    return { 
     ...state 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    const creators = Map() 
      .merge(...actions) 
      .filter(value => typeof value === 'function') 
      .toObject(); 

    return { 
    actions: bindActionCreators(creators, dispatch), 
    dispatch 
    }; 
} 

........ 

<View style={styles.box}> 
    {PRICE_FILTERS.map(filter =>{ 
     let price_cont_style = {}; 
     let price_text_style = {}; 
     if (filter.id == PRICE_FILTERS[3].id){ 
      price_cont_style.marginRight = 0; 
     } 
     if (filter.id == this.props.test.price){ 
      price_cont_style.backgroundColor = 'black'; 
      price_text_style.color = 'white'; 
     } 
     return(
     <TouchableOpacity 
      key={filter.id} 
      style={[styles.price_cont, price_cont_style]} 
      onPress={()=>this.props.actions.setPrice(filter.id)}> 
     <Text 
      style={[styles.price_text, price_text_style]}> 
      {filter.label} 
     </Text> 
     </TouchableOpacity> 
     ); 
    })} 
</View> 

...... 

export default connect(mapStateToProps, mapDispatchToProps)(PerformanceTest); 

Aktionen

const { 
    TEST_SET_PRICE, 
} = require('../../lib/constants').default; 

export function setPrice(filter) { 
    return { 
    type: TEST_SET_PRICE, 
    payload: filter 
    }; 
} 

Reducer

const { 
    TEST_SET_PRICE, 
} = require('../../lib/constants').default; 
const InitialState = require('./testInitialState').default; 
export default function authReducer(state = InitialState, action) { 
    switch (action.type) { 

    case TEST_SET_PRICE: 
     if (state.price!=action.payload){ 
      return {price:action.payload} 
     } else{ 
      return state; 
     } 

    } 
    return state; 
} 

Answer 1

ich bemerkt habe, dass in Ihrem Video, Sie haben redux-Logger aktiviert, aber Fluss und setState melden Sie sich nicht in der Konsole.

Es könnte console.log sein, die diesen Leistungsabfall verursacht. Es gibt eine known issue, hier ist eine explanation.

Versuchen Sie, die Konsolenprotokollierung zu deaktivieren, und sehen Sie, wie sich dies auf die Leistung auswirkt.

Answer 2

Wie es die Ursache für dieses Problem stellte sich heraus, ist alle Komponenten von Navigationskette unmontiert bleiben und hinter der aktuellen Szene

Sehen Sie hier weitere Details Possible navigation issue in React Native/Redux app