React 컴포넌트가 여러 번 마운트되면 어떻게 해야 하나요?

반응 구성 요소를 여러 번 마운트하는 솔루션: 1. "index.tsx" 또는 "index.js" 파일을 찾아 엽니다. 2. "root.render( < ;/React.StrictMode>);" 코드; 3. "React.StrictMode" 상위 구성 요소를 둘러싸서 제거합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.2.0, Dell G3 컴퓨터.

리액트 컴포넌트가 여러번 마운트 된다면 어떻게 해야 하나요?

React 18 componentDidMount가 두 번 실행되는 솔루션

Problem

지난 이틀 동안 create-react-app을 사용하여 새 React 프로젝트를 생성했는데, 예상치 못한 일이 발생한 것 같습니다. 구성 요소의 componentDidMount 메서드가 두 번 트리거됩니다.

역시 create-react-app을 사용하여 만든 이전 프로젝트에는 이 문제가 없었습니다. 당시에는 정말 혼란스러웠습니다. . .

문제 해결

가장 먼저 떠오르는 것은 며칠 전에 로컬 create-react-app이 업그레이드되었다는 것입니다. 생각해 보면 문제가 발생하는 것입니까? 중요하지 않습니다. 나중에 두 프로젝트의 package.json 파일을 주의 깊게 비교한 결과 이전 프로젝트에서는 React 버전 17.x를 사용한 반면 문제 프로젝트에서는 React 버전 18.2.0을 사용했다는 사실을 발견했습니다.

나중에 저는 React 공식 Github에 가서 버전 18에 대한 몇 가지 기능을 찾았습니다. 링크: https://github.com/facebook/react/blob/main/CHANGELOG.md#breaking-changes:

Stricter Strict Mode: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.

일반적인 아이디어는 다음과 같습니다:

미래에 React는 구성 요소가 언로드된 후에도 상태를 유지할 수 있도록 하는 새로운 기능을 제공할 것입니다. React 18에서는 Strict Mode라는 새로운 개발 모드를 도입합니다. React는 자동으로 각 구성요소를 언로드하고 다시 로드합니다. 앱을 방해하는 경우 엄격 모드를 제거하면 구성 요소 다시 로드 문제를 해결할 수 있습니다. (저의 영어 번역이 형편없어 그냥 읽어보세요...)

Solution

이유를 알고 나면 해결책도 매우 간단합니다. index.tsx 또는 index.js 파일의 React.StrictMode를 더 높게 변경하세요. 주변 구성 요소를 제거합니다.

수정 전:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

수정 후:

root.render(
  // 去除React.StrictMode
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

이제 문제는 완벽하게 해결되었습니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 React 컴포넌트가 여러 번 마운트되면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!