Warum componentDidMount in einer Komponente höherer Ordnung mehrmals aufgerufen?

Question

Die docs sagt:

einmal aufgerufen, nur auf dem Client (nicht auf dem Server), unmittelbar nach der ersten Wiedergabe erfolgt.

Jetzt, wenn ich versuche, eine höhere Ordnung Komponente zu erstellen:

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

nun jedes Mal, alle Änderungen in Requisiten auftreten, wird die Konsole diese drucken:

'wrapped component mounted' 
'wrapper component mounted' 

Wenn ich Entfernen Sie die Wrapper, es wird nur einmal gedruckt (wenn montiert in der ersten Zeit):

`wrapped component mounted` 

Also, warum componentDidMount in höherer Ordnung Komponente mehr als einmal aufgerufen?

Answer 1

connect() (Umbruch (Wrapper)); < - ersetzen mit Wrapped

Ich habe es getestet. Und es funktioniert.

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

Wrap func liefert Wrapper, Sie nicht den Wrapper in Wrap func passieren kann. es ist Schleife