상위 컴포넌트에서 componentDidMount가 두 번 이상 호출 된 이유는 무엇입니까?

Question

docs는 말한다 :

초기 렌더링이 발생한 후 즉시 만 (가 아닌 서버) 클라이언트에 한 번 불려갑니다. 이제

, 나는 고차 구성 요소를 만들려고 할 때 : 나는 경우

'wrapped component mounted' 
'wrapper component mounted' 

: 지금 어떤 변화가 소품 발생할 때마다

import React from 'react'; 
import { connect } from 'react-redux'; 

function wrap(Wrapped) { 

    class Wrapper extends React.Component { 
    componentDidMount() { 
     // I will place some reusable functionality here which need to 
     // be called once on mounted. 
     console.log('wrapper component mounted'); 
    } 
    render() { 
     return <Wrapped {...this.props}/> 
    } 
    } 
    return Wrapper; 
} 

class Wrapped extends React.Component { 
    componentDidMount() { 
    console.log('wrapped component mounted'); 
    } 
    render() { 
    return <div></div>; 
    } 
} 

connect()(wrap(Wrapped)); 

을 콘솔이 인쇄됩니다 Wrapper을 제거하면 첫 번째로 으로 마운트 된 경우에만 한 번만 인쇄됩니다.

`wrapped component mounted` 

왜 컴포넌트 구성 요소의 상위 구성 요소에서 componentDidMount가 두 번 이상 호출 되었습니까?

Answer 1

connect() (랩 (래퍼)); < - 감싸기로 대체하십시오.

테스트를 마쳤습니다. 그리고 그것은 작동합니다.

function wrap(Wrapped) { 
    class Wrapper extends React.Component { 
    componentDidMount() { 
     console.log('wrapper component mounted'); 
    } 
    render() { 
     return <Wrapped {...this.props}/> 
    } 
    componentDidUpdate(prevProps, prevState){ 
     console.log(this.props); 
    } 
    } 
    return Wrapper; 
} 
class Wrapped extends React.Component { 
    componentDidMount() { 
    console.log('wrapped component mounted'); 
    } 
    componentDidUpdate(prevProps, prevState){ 
     console.log(this.props); 
    } 
    render() { 
    return <div></div>; 
    } 
} 

connect(state=>({state}))(wrap(Wrapped)); 

랩 FUNC은 랩 FUNC에 래퍼를 전달할 수 없습니다, 래퍼를 반환합니다. 그것의 루프