使用 Redux 的 React Native 性能低下答案

【问题标题】：Low performance in React Native with Redux使用 Redux 的 React Native 性能低下
【发布时间】：2016-11-29 06:12:27
【问题描述】：

我在我的 react native 应用中发现了一些性能问题。它似乎是由 react-redux 包引起的。

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

Redux/Flux/setState comparing

在动作分派和视图呈现之间存在显着延迟。在真实设备上，它看起来更糟。此示例中没有 API 调用。只有简单的动作调度和状态改变。另一方面，Facebook Flux 实现和 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;

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

【问题讨论】：

标签： performance reactjs react-native redux react-redux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

可能是 console.log 导致了这种性能下降。有一个known issue，这里有一个explanation。

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

【讨论】：

是的，我知道 redux-logger 的这个问题，并尝试禁用 redux-logger 并删除所有 console.log 命令。它没有帮助。同样的延误也存在。在视频中，我留下了记录器和“RENDERING”消息，以证明唯一的操作是调度和按下按钮时执行的唯一渲染。