ReactJS - 부모 구성 요소에서`setState`의 성능 함축적 의미

Question

React를 사용하여 대규모 응용 프로그램을 빌드하는 중입니다. 공유 부모 구성 요소가 여러 자식에 대한 모든 상태를 처리합니다. 이들 중 일부는 1000 개가 넘는 항목의 목록을 렌더링합니다.

부모 내부에서 부울을 setState으로 토글하면 상위를 다시 렌더링하고 모든 하위를 다시 렌더링한다는 것을 알았습니다.

내 질문에, 자식에 대한 목록 항목 중 하나도 변경되지 않으면 자식이 반복 재생되고 부모가 다시 렌더링 할 때마다 거대한 목록을 다시 작성하게됩니까?

어디에서 가상 DOM이 역할을합니까? 하위 요소가 목록을 다시 빌드하지만 DOM은 목록 요소가 변경되지 않았 음을 diff가 확인하기 때문에 업데이트하지 않아도됩니까?

편집 : 마지막으로, 그렇다면 key 속성이 목록 다시 렌더링에 어떤 영향을 줍니까? 고유 한 키가있는 항목이 모두 1000 개이지만 3 개의 항목에 null의 키가있는 경우 (즉 키 값이 같음을 의미) 다음 전체 목록이 다시 렌더링됩니까?

Answer 1

자식이 목록을 다시 빌드하지만 diff에서 목록 요소가 변경되지 않았기 때문에 DOM을 업데이트 할 필요가 없습니까?

예. 이에 대한 자세한 내용은 여기를 참조하십시오. https://facebook.github.io/react/docs/reconciliation.html

일반적으로이 작업은 너무 빠르다고 말할 수는 없지만 어느 시점에서는 diff 패치가 느려집니다. 부울을 뒤집는 것은 대단한 일은 아니지만 60fps로 부울 값을 뒤집으면 일부 엉망이 될 수 있습니다.

눈에 띄는 지연을 막기 위해 할 수있는 일은 흔하지 만, shouldComponentUpdate을 구현하는 것은 항상 선택입니다. 당신이 거기있는 동안

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

이 당신을 관심을 끄는 무언가에 대한 React.PureComponent 경우입니다 읽어 보시기 바랍니다.