Почему componentDidMount в компоненте более высокого порядка называется более одного раза?

Question

docs говорит:

Вызывается один раз, только на клиенте (не на сервере), немедленно после первоначального рендеринга происходит.

Теперь, когда я пытаюсь создать более высокий компонент порядка:

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)); 

Теперь, каждый раз, когда какие-либо изменения происходят в реквизите, консоль будет печатать это:

'wrapped component mounted' 
'wrapper component mounted' 

Если я удалите Wrapper, он будет печатать только один раз (когда установлен в в первый раз):

`wrapped component mounted` 

Итак, почему компонент ComponidMount в компоненте более высокого порядка называется более одного раза?

Answer 1

connect() (wrap (Wrapper)); < - заменить на обернутый

Я протестировал его. И это работает.

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 Wrapper, вы не можете передать Wrapper в оберточной FUNC. его петля