상태가 변경 될 때마다 React 구성 요소를 업데이트하지 않는 방법은 무엇입니까?

Question

데이터를 검색하기 위해 서버에 Redux와 Websocket 연결을 사용합니다. 데이터 양은 Websocket 메시지로 하나씩 내 응용 프로그램에 들어가는 약 200k 행입니다. 일단 행이 오면 Redx를 사용하여 그 상태로 저장하고 싶습니다. 어떻게해야하는지 알고 있으며 정상적으로 작동합니다.

내가 예상하는 문제는 단일 행이 상태에 추가 될 때마다보기를 업데이트하고 싶지 않다는 것입니다.

생각은 각각 10 초 정도의보기 업데이트를 디버깅하는 것이거나 10k 행마다있을 수 있습니다.

제대로 작동 시키려면 어떻게해야합니까? 나는 상세한 기술적 솔루션보다는 설명 된 개념에 더 많은 관심을 가지고 있습니다.

감사합니다.

Answer 1

상태가 변경 될 때 구성 요소의 shouldComponentUpdate을 사용하여 다시 렌더링을 거부 할 수 있습니다. 이 같은 -

class MyComponent extends React.Component { 
    shouldComponentUpdate(nextProps, nextState) { 
    // only re-render when you have data worth 10x rows 
    return nextState.arrayOfRows % 10 === 0; 
    } 

    render() { 
    // render logic here 
    } 
} 

Answer 2

하나의 옵션은 @RaghudevanShankar's answer 같은 shouldComponentUpdate으로 업데이트하거나하지 말아야 구성 요소를 제어하는 ​​것입니다.

또 다른 옵션으로 redux 상태를 주기적으로 업데이트 할 수 있습니다. 예를 들어 모든 메시지/행에 레코드를 추가하는 대신 배치로 결합한 다음 행 데이터의 배열로 작업을 실행할 수 있습니다.