TAB Navigator性能使用Redux

Question

我正在使用React native 0.50.4和react navigation 1.0.0-beta.19。我有一个完善的问题。我正在使用Tab navigator，其中4个选项卡基本上是A form（最大11个字段）我已将所有表单字段（所有4个选项卡）连接起来。因此，当保存在最后一个选项卡上进行保存时可用。

现在，在编辑时，用户可以在每个选项卡的componentDidMount上导航到此Tab navigator。我正在派遣行动创建者，以填充每个字段的状态。然后在渲染方法中填充字段值（来自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性能真的很差，切换到Redux-Saga后，最多需要7秒才能导航，它变得更快，需要3-4秒才能导航 注意：Tab Navigator嵌套在顶层堆栈Navigator中。

Answer 1

当您只能派遣一个操作以更新商店时，为什么要派遣11个操作？

每个调度都会导致潜在的重新渲染，这可能是您绩效问题的原因。