React Native與Redux中的低性能

我在反應原生應用程序中發現了一些性能問題。這似乎是由反應 - 還原束引起的。React Native與Redux中的低性能

正如你可以在視頻

看到有行動調度和視圖呈現之間的顯著延遲。在真實的設備上，它看起來更糟。本例中沒有API調用。只有簡單的動作調度和狀態變化。另一方面，Facebook Flux實現和setState的簡單調用工作速度要快得多。

任何想法如何提高應用程序性能？

我使用反應：v15.2.1，反應母語：v0.29.2，反應，終極版：v4.4.5，

查看

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);

操作

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

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

減速

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; 
}

來源

2016-07-25 alexsh

我注意到，在你的視頻，你必須啓用終極版記錄器，但通量以及setstate這不登錄到控制檯。

它可能是console.log導致此性能下降。有一個known issue，這裏是一個explanation。

嘗試關閉控制檯日誌記錄並查看它是如何影響性能的。

來源

2016-07-26 08:17:44

是的，我知道這個問題使用redux-logger並嘗試禁用redux-logger並刪除所有console.log命令。它沒有幫助。同樣的延誤存在。在視頻中，我離開了記錄器和「渲染」消息，證明唯一的動作是分派，並且按下按鈕時執行唯一的渲染。 – alexsh

事實證明這個問題的原因是導航鏈中的所有組件都呆在卸載並獲得重新描繪當前場景的背後

在這裏看到更多的細節 Possible navigation issue in React Native/Redux app

來源

2016-08-02 19:02:45 alexsh

React Native與Redux中的低性能

回答

相關問題