Question

我在我的本机应用程序中发现了一些性能问题。它似乎是由react-redux捆绑引起的。

正如您在视频中看到的那样

动作调度和视图渲染之间存在显着延迟。在真实设备上，它看起来更糟。此示例中没有API调用。只有简单的动作调度和状态更改。另一方面，Facebook Flux实现和setState的简单调用工作要快得多。

如何提高应用性能？

我正在使用反应：v15.2.1， react-native：v0.29.2， react-redux：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;
}

Answer 1

我注意到在你的视频中，你启用了redux-logger，但是flux和setState没有登录到控制台。

可能是console.log会导致性能下降。有known issue，这是explanation。

尝试关闭控制台日志记录并查看它如何影响性能。

Answer 2

事实证明，导致此问题的原因是导航链中的所有组件都保持未安装并在当前场景后面重新渲染

在此处查看更多详情 Possible navigation issue in React Native/Redux app

使用Redux的React Native中的低性能

2 个答案: