使用redux的Tab Navigator性能問題

我正在使用React native 0.50.4和react 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秒導航注意：標籤導航器嵌套在頂層堆棧導航器中。

來源

2017-12-18 Yasir

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

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

來源

2017-12-18 21:04:20 Jamie

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

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

使用redux的Tab Navigator性能問題

回答

相關問題