小编ale*_*xsh的帖子

在使用Redux的大型React Native应用程序中导航期间,所有访问过的场景(来自导航堆栈的场景)都保持挂载状态.当从最后一个场景组件调度任何动作时,所有这些场景都接收道具并按照它们被访问的顺序进行渲染.它会导致调度和最后一次场景渲染之间的冻结和可见延迟.

对于导航我使用的是react-native-router-flux,但同样的问题也发生在原始的React Native Navigator上.

视频React Native/Redux应用程序中可能存在的导航问题

代码react-redux-navigation-test

很高兴知道如何防止将道具传递给导航链中没有聚焦的组件.

目前,我正在检查每个组件的shouldComponentUpdate,如果这个组件被聚焦(可见)并且在相反的情况下返回false.

有没有更好的解决方案？

如果最初关闭位置服务,则在打开时watchPosition不会调用该服务.作为一种解决方法,navigator.geolocation.getCurrentPosition如果发生错误,我将以递归方式调用.

watchPosition关闭位置服务时也不会调用.

在iOS上,一切都按预期工作.

任何建议将不胜感激

测试了Galaxy Note 5(Android 6.0.1)和不同的AVD仿真器,react-native v0.33

android.permission.ACCESS_FINE_LOCATION 包含在AndroidManifest.xml中

initialGeolocation(){
    delete this.androidLocation;
    navigator.geolocation.getCurrentPosition(
        (position) => {
            log('LOCATION getCurrentPosition success', position);  
            deviceActions.geolocation(position);
        },
        (error) => {
            log('LOCATION getCurrentPosition error', error.message || error);
            if (Platform.OS == 'android'){
                this.androidLocation = setTimeout(this.initialGeolocation, 500);
            }
        }, 
        {
            enableHighAccuracy: (Platform.OS == 'android') ? false : true, 
            timeout: 10000, 
            maximumAge: 500
        }
    );
},   

componentDidMount() {
    this.initialGeolocation();
    this.watchID = navigator.geolocation.watchPosition(
        (position) => {
           log('LOCATION watchPosition success', position);
           deviceActions.geolocation(position);
        },
        (error) …

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

正如你在视频中看到的

Redux/Flux/setState 比较

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

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

我正在使用 react: 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(); …