2017-12-18 180 views
1

我正在使用React native 0.50.4react navigation 1.0.0-beta.19。我有一個性能問題。我使用Tab navigator與4個選項卡基本上每個表單(最多11個字段) 我已經將所有表單字段(全部4個選項卡)以redux狀態連接起來。以便在最後一個選項卡保存時數據可用。使用redux的Tab Navigator性能問題

現在用戶可以在編輯時(通過單擊按鈕編輯)導航到此Tab navigator,每個標籤的componentDidMount。我正在派遣行動創作者,填充每個領域的狀態。然後在渲染方法中填充字段值(來自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); 

上面的代碼是其中一個選項卡的示例。

注意:在使用終極版,性能的thunk時,是非常糟糕的,花了高達7秒也許更多瀏覽,切換到終極版 - 傳奇之後,它變得越來越快,服用3-4秒導航 注意:標籤導航器嵌套在頂層堆棧導航器中。

回答

0

爲什麼調度11行動,當你可以只調度一個動作來更新商店?

每次調度都會導致潛在的重新呈現,這可能是您的性能問題的原因。

+0

這不是一個答案。它應該是對這個問題的評論。 – pcarter

+0

你是對的,我不知道爲什麼我沒有看到。 – Yasir