redux를 사용한 Tab Navigator 성능 문제

Question

React native 0.50.4 및 react navigation 1.0.0-beta.19을 사용하고 있습니다. 나는 성능 문제가있다. 나는 Tab navigator을 기본적으로 4 개의 탭과 함께 사용하고있다. (최대 11 개의 필드) 나는 모든 폼 필드 (4 개의 탭 모두)를 redux 상태로 연결했다. 마지막 탭에서 저장이 발생하면 데이터를 사용할 수 있습니다.

이제 각 탭의 componentDidMount에서 편집 할 때 (버튼 편집을 클릭하여)이 Tab navigator으로 이동할 수 있습니다. 각 필드의 상태를 채우는 액션 크리에이터를 파견하고 있습니다. (mapStateToProps에서) 필드 값을 채우는 render 메소드에서.

참고 : 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-썽크 성능을했다 사용하는 경우, 그것은 아마도 탐색, REDUX-사가로 전환 한 후,이 주를 탐색 3-4 초 복용, 빠른되었다 더 칠초까지했다 : 탭 네비게이터는 최상위 스택 탐색기에 중첩되어 있습니다.

Answer 1

스토어를 업데이트하기 위해 하나의 작업을 보낼 수있는 경우 왜 11 가지 작업을 보내야합니까?

모든 디스패치는 잠재적 인 재 렌더링을 유발하여 성능 문제의 원인이 될 수 있습니다.