Question

I am using React native 0.50.4, and react navigation 1.0.0-beta.19. I have a perfomance issue. I am using Tab navigator with 4 tabs basically each a form (max 11 fields) I have hooked up all the forms fields (all 4 tabs) in redux states. so that the data is available when save happens at the last Tab.

Now the user can navigate to this Tab navigator when editing (by clicking button edit), on each tab's componentDidMount. I am dispatching action creators , that populates the states of each field. and then in render method populating field values (from mapStateToProps).

NOTE: no data is being fetched from server here, the data is being passed through navigation state when clicking the Edit button

The performance issue is where when the Edit button is clicked , it takes few seconds before performing navigation (on real device, on emulator no performance issue). I tried to have loading state to initiate before performing all the other dispatches in componentDidMount but still , the navigation doesn't happen immediately (meaning it does not navigate and show loading state and once everything ready , just show)

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

The above code is sample of one of the Tabs.

NOTE: when using redux-thunk performance was really bad, it took up to 7 second maybe more to navigate, after switching to redux-saga, it became faster, taking 3-4 seconds to navigate NOTE: The tab navigator is nested in a top level stack navigator.

Answer 1

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

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

Tab Navigator performance issue using redux

1 个答案: