성능 비교 this.setState (this.state) vs this.setState ({})

Question

나는 API로부터 데이터를받는 시나리오가 있습니다. 이 경우 저장소에서 새 값을 가져올 때마다 내 componentWillReceiveProps()가 트리거됩니다.

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.state.listOne = newProps.listOne; 
    } 
    if(newProps.listTwo){ 
    this.state.listTwo = newProps.listTwo; 
    } 

    this.setState(this.state); 

} 

이제 반응 당 문서로 this.setState (this.state);

그래서 마음 상태가 한 번만 나는 상태로 모든 데이터를 복사 한 후 트리거됩니다 렌더링 내 경우 1 년

componentWillReceiveProps(newProps){ 
    if(newProps.listOne){ 
    this.setState({listOne : newProps.listOne}); 
    } 
    if(newProps.listTwo){ 
    this.setState({listTwo : newProps.listTwo}); 
    } 

} 

될 것이라고 업데이트 할 수있는 방법을 그 유지. 경우 2의 내 렌더링 (및 모든 중간 수명주기)이 발생하고, If 조건이 충족 될 때마다 트리거됩니다.

그래서 성능이 어떻게 향상되는지 이해하지 못합니다. 우리가 국가의 조건부 갱신 중 하나가 아니라 많은 것을 말하고 있다고 가정 해 보겠습니다. 한 번만 setState를 호출 할 경우

Answer 1

, 당신은 이런 식으로 작업을 수행 할 수 있습니다

componentWillReceiveProps(newProps) { 
    // Copy the state instead of mutating this.state directly. 
    const state = { ...this.state }; 

    if (newProps.listOne) { 
     state.listOne = newProps.listOne; 
    } 

    if (newProps.listTwo) { 
     state.listTwo = newProps.listTwo; 
    } 

    this.setState(state); 
} 

당신은 더 같은 Immuable.js와 같은 라이브러리를 이용하여 진정한 불변의 데이터 구조를 사용하여 여기에 향상시킬 수 있습니다.

그러나 성능 측면에서 수동 업데이트를 수동으로 일괄 처리 할 필요는 없습니다. React 내부적으로는 라이프 사이클 후크이므로 이미이 업데이트를 배치합니다. 그러나 setState의 콜백을 사용하려는 경우에는 의미가 있습니다.