ReactJS: `setState`는 항상 전체 다시 렌더링을 트리거합니까?

ReactJS: "setState"가 호출될 때마다 "render"가 트리거됩니까?

React는 다음과 같은 경우에만 구성 요소를 효율적으로 다시 렌더링하도록 설계되었습니다. 필요한. 그러나 이 동작은 항상 명확하지 않을 수 있으므로 "setState"와 렌더링 사이의 관계에 대한 의문이 생길 수 있습니다.

기본 렌더링 동작

기본적으로 "setState"를 호출합니다. "는 구성 요소와 모든 하위 구성 요소의 전체 다시 렌더링을 트리거합니다. 이렇게 하면 상태에 대한 모든 변경 사항이 UI에 정확하게 반영됩니다.

이 동작은 기본적으로 항상 true를 반환하는 "shouldComponentUpdate"의 결과입니다. 이 방법은 구성 요소가 props 또는 상태 변경에 따라 렌더링 출력을 업데이트해야 하는지 여부를 결정합니다.

렌더링의 목적

"render"가 매번 호출되더라도 " setState"가 호출되면 React는 DOM을 즉시 업데이트하지 않습니다. 대신, 원하는 UI 상태를 나타내는 가상 DOM이 생성됩니다. 실제 DOM은 이전 가상 DOM과 새 가상 DOM 사이에 변경 사항이 있는 경우에만 수정됩니다.

예

질문에 제공된 코드 조각을 고려하세요.

this.setState({'test':'me'});

초기 클릭 후 상태가 변경되지 않았음에도 불구하고 상위 구성 요소와 하위 구성 요소가 모두 다시 렌더링됩니다. 이는 "shouldComponentUpdate"가 항상 true를 반환하여 강제로 다시 렌더링되기 때문입니다.

재렌더링 최적화

불필요한 재렌더링을 방지하려면 "shouldComponentUpdate를 재정의할 수 있습니다. "를 입력하고 새 props와 state를 이전 값과 비교합니다. UI에 영향을 미치는 중요한 변경 사항이 없으면 false를 반환하여 렌더링을 방지할 수 있습니다.

로직이 너무 복잡하거나 불필요한 비교를 수행하는 경우 "shouldComponentUpdate"를 과도하게 사용하면 성능 문제가 발생할 수 있다는 점을 기억하세요.

위 내용은 ReactJS: `setState`는 항상 전체 다시 렌더링을 트리거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!