react.js & redux에서 componentDisMount가 여러 번 호출된 이유는 무엇입니까?

react.js & redux에서 componentDisMount가 여러 번 호출된 이유는 무엇입니까?

저는 책을 읽어요.componentDidMount첫 번째 렌더링에서는 한 번만 호출되는데 여러 번 호출되는 것 같아요.

내가 재귀 루프를 만든 것 같아.

• componentDiMount가 데이터를 가져오는 액션을 디스패치했습니다.
• 데이터를 수신하면 성공 액션을 실행하여 데이터를 redux 상태로 저장합니다.
• 상위 반응 구성요소는 레독스 저장소에 연결되어 있으며mapStateToProps위의 단계에서 방금 변경된 엔트리에 대해
• 부모가 하위 구성 요소를 렌더링합니다(변수를 통해 프로그래밍 방식으로 선택됨).
• 하위 구성 요소의 componentDidMount가 다시 호출됩니다.
• 데이터를 가져오는 액션을 디스패치합니다.

그런 일이 일어나고 있는 것 같아요.아마 제가 잘못했겠죠.

루프를 멈추려면 어떻게 해야 하나요?

이것은 하위 구성요소를 프로그래밍 방식으로 렌더링하는 코드입니다.

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }

구성 요소 인스턴스는 한 번만 마운트되고 삭제될 때 마운트 해제됩니다.사용자의 경우 삭제 및 재생성됩니다.

의 포인트key프로포트는 React가 동일한 컴포넌트의 이전 버전을 찾을 수 있도록 지원하는 것입니다.이렇게 하면 새 소품을 만드는 대신 이전 구성요소를 새 소품으로 업데이트할 수 있습니다.

리액션은 키가 없어도 정상적으로 동작하는 경우가 많습니다만, 아이템이 있는 리스트는 예외입니다.항목이 재배치, 생성 또는 삭제될 때 추적할 수 있는 키가 필요합니다.

이 경우 React에게 컴포넌트가 이전 컴포넌트와 다르다고 명시적으로 말합니다.각 렌더링에 새 키를 지정합니다.그러면 React는 이전 인스턴스가 삭제된 것으로 간주됩니다.그 부품의 모든 아이들도 분리되고 분해됩니다.

당신이 해야 할 일은 무작위로 키를 생성해서는 안 된다.키는 항상 컴포넌트가 표시하는 데이터의 ID를 기반으로 해야 합니다.목록 항목이 아니라면 키가 필요하지 않을 수 있습니다.목록 항목인 경우 ID 속성 또는 여러 필드의 조합과 같은 데이터 ID에서 파생된 키를 사용하는 것이 훨씬 좋습니다.

랜덤 키를 생성하는 것이 올바른 방법이었다면 React가 대신 처리했을 것입니다.

초기 가져오기 코드를 리액트 트리의 루트에 배치해야 합니다.일반적으로 다음과 같습니다.App아무렇게나 아이를 맡기지 마세요.최소한 앱의 수명 동안 존재하는 구성 요소에 넣어야 합니다.

★★★★★★에 대해서componentDidMount서버측 컴포넌트는 마운트되지 않기 때문에 서버에서 실행되지 않습니다.이치노지금 하지 않아도 나중에 할 수 있고, 이에 대비하는 것이 가장 좋은 방법입니다.

★★componentDidMount은, 「콜」을 사용하는 .<React.StrictMode>컴포넌트 주변에 있습니다.이치노

이는 예상치 못한 부작용을 감지하는 데 도움이 되는 동작입니다.자세한 내용은 문서를 참조하십시오.실제 가동 중인 개발 환경에서만 발생합니다.componentDidMount 한 번만 불러도 요.<React.StrictMode>.

특정의 경우는, DDS에 의한 회답이 옳습니다.그러나 Strict Mode도 일반적인 문제이며 구글 검색 결과에서 이 질문이 많이 나옵니다.

인용구:

devtools를 도입할 때 클라이언트/서버 마크업 불일치에 대한 경고를 받지 않기 위해 개발 모드에서 2개의 초기 렌더링을 하기 때문입니다.생산에 영향을 주지 않습니다.

첫 번째 사진 - 현상 모드, 두 번째 사진 - 제작 모드.

언급URL : https://stackoverflow.com/questions/39974210/why-componentdidmount-gets-called-multiple-times-in-react-js-redux