엄격 모드의 모든 상태 업데이트에서 구성 요소가 두 번 렌더링되는 이유는 무엇입니까?

상태 업데이트 및 구성 요소 렌더링 이해

엄격 모드를 명시적으로 활성화하지 않았음에도 불구하고 각 상태 업데이트에서 구성 요소가 두 번 렌더링되는 문제는 다음에서 비롯됩니다. React의 Strict 모드 사용.

React에서 App 구성 요소는 React.StrictMode로 래핑됩니다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

React 문서에 따르면

Strict 모드는 부작용을 자동으로 감지할 수 없지만 좀 더 결정적으로 만들어 부작용을 발견하는 데 도움이 될 수 있습니다. 이는 다음 함수를 의도적으로 이중 호출하여 수행됩니다.

• 상태 업데이트 함수(setState의 첫 번째 인수)
• useState, useMemo 또는 useReducer에 전달되는 함수

귀하의 예에서 onClick 핸들러에 전달된 chaneNumber 함수는 useState를 사용하여 상태 업데이트를 트리거합니다. 결과적으로 React는 개발 모드에서 의도적으로 이 함수를 두 번 호출합니다. 이로 인해 각 상태 업데이트에서 구성 요소가 두 번 렌더링됩니다.

이 동작은 개발자가 상태 업데이트로 인해 발생할 수 있는 잠재적인 부작용이나 성능 문제를 식별하는 데 도움을 주기 위한 것입니다. React는 함수를 두 번 실행함으로써 모든 부작용이 두 번 발생하도록 보장하므로 잠재적인 문제를 디버깅하고 해결하기가 더 쉬워집니다.

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