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中的低性能

回答

相关问题