내 React 구성 요소가 엄격 모드에서 두 번 렌더링되는 이유는 무엇입니까?

엄격 모드에서 React 컴포넌트 렌더링을 두 번

엄격 모드에서 React는 의도적으로 컴포넌트 렌더링 기능을 두 번 호출하여 잠재적인 부작용을 감지합니다. 이 동작은 구성 요소를 두 번 렌더링하면 더욱 분명해집니다.

제공된 코드 예제에서 업데이트 구성 요소는 엄격 모드에서 실행 중이기 때문에 두 번 렌더링됩니다. index.js에서 strict 모드 태그를 주석 처리하면 문제가 해결되고 구성 요소가 한 번만 렌더링됩니다.

React.StrictMode는 렌더링 단계에서 우발적인 부작용을 식별하는 데 도움이 되는 개발 모드 기능입니다. 이는 눈에 띄지 않을 수 있는 문제를 드러낼 수 있는 렌더링 기능을 복제하여 달성합니다.

React 문서에 따르면 렌더링 중 예상치 못한 부작용은 다음과 같은 이유로 발생할 수 있습니다.

• 컴포넌트 렌더 함수 외부에서 Hook 호출
• 렌더링 중 DOM에서 읽기
• 액세스 렌더링 중에 구성 요소에 전달된 참조
• 렌더링 함수 내에서 상태 변경
• 구성 요소의 렌더링 함수 내에서 상위 구성 요소의 상태 변경 트리거

위 내용은 내 React 구성 요소가 엄격 모드에서 두 번 렌더링되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!