Performance React Native with Redux的性能较低

我在react原生应用程序中发现了一些性能问题。这似乎是由react redux bundle引起的

正如你在视频中看到的

在动作调度和视图渲染之间存在明显的延迟。在真正的设备上，情况看起来更糟。 本例中没有API调用。只有简单的操作和状态更改。另一方面，FacebookFlux实现和简单的setState调用工作得更快

如何提高应用程序的性能

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

---

我注意到在你们的视频中，你们启用了redux记录器，但flux和setState并没有登录到控制台

可能是console.log导致性能下降。这里有一个，这里有一个

---

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

事实证明，导致此问题的原因是导航链中的所有组件都保持卸载状态，并在当前场景后面重新加载

请参阅此处的更多详细信息

---

是的，我知道redux logger存在此问题，并尝试禁用redux logger并删除所有console.log命令。这没有帮助。同样的延误也存在。在视频中，我留下了logger和“RENDERING”消息，作为唯一操作是分派的证据，并且在按下按钮时执行唯一的渲染。

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