使用redux的Tab Navigator性能问题

Question

我正在使用React native 0.50.4和react navigation 1.0.0-beta.19。我有性能问题。我正在使用带有4个标签的Tab navigator基本上每个表单（最多11个字段）我已经连接了redux状态中的所有表单字段（所有4个选项卡）。以便在最后一个选项卡上进行保存时数据可用。

现在，用户可以在每个选项卡的Tab navigator上编辑（通过单击按钮编辑）导航到此componentDidMount。我正在调度动作创建者，它填充每个字段的状态。然后在render方法中填充字段值（来自mapStateToProps）。

注意：此处没有从服务器获取数据，单击“编辑”按钮时数据将通过导航状态传递

性能问题是当点击Edit button时，执行导航需要几秒钟（在真实设备上，在模拟器上没有性能问题）。我尝试在componentDidMount中执行所有其他调度之前启动加载状态但是，导航不会立即发生（意味着它不会导航并显示加载状态，一旦一切准备就绪，只显示）

constructor(props){
    super(props);
    props.initialLoader(); // STATE HERE LOADING: TRUE
}

componentDidMount(){
 if (this.props.navigation.state.params){
   const userData = this.props.navigation.state.params.userData;

   this.populateOperation(userData).then(() => {
      this.props.dismissLoader(); // LOADING: FALSE
   });

 }
}
populateOperation = (userData) => {
    return new Promise((resolve) => {
        resolve(
            this.props.inputChanged(userData.emailAddress),
            this.props.addressInputChanged(userData.address),
            this.props.addressContInputChanged(userData.addressCont),
            this.props.cityInputChanged(userData.city),
            this.props.stateInputChanged(userData.state),
            this.props.postalCodeInputChanged(userData.postalCode),
            this.props.countryInputChanged(userData.country == ''? 'Country' : userData.country),
            this.props.phoneInputChanged(userData.phone),
            this.props.mobilePhoneInputChanged(userData.mobile),
            this.props.linkedInInputChanged(userData.linkedIn),
            this.props.twitterInputChanged(userData.twitter),
        );
    });
}

render(){
   const {...} = this.props.formState;
   return(
     <KeyboardAwareScrollView
       style={outerContainer}
       keyboardOpeningTime={100}
       extraScrollHeight={5}
     >
    {
       loading ?
       ... // SHOW LOADING
       :
       ... // FORM
    }

   );
}

function mapStateToProps (state){
    return {
        formState: state.contactReducer
    }
}

function mapDispatchToProps(dispatch){
    return {
       ...
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactTab);

上面的代码是其中一个标签的示例。

注意：当使用redux-thunk性能非常糟糕时，导航需要多达7秒或更长时间，切换到redux-saga后，它变得更快，需要3-4秒才能导航注意：选项卡导航器嵌套在一个顶级堆栈导航器。

Answer 1

为什么在您可以发送一个操作来更新商店时调度11个操作？

每次调度都会导致重新渲染，这可能是导致性能问题的原因。