为什么 componentDidMount 在高阶组件中调用不止一次？

Question

docs 说：

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.

现在，当我尝试创建高阶组件时：

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`

那么，为什么高阶组件中的 componentDidMount 被调用了不止一次？

Answer 1

connect()(wrap(Wrapper)); <-- 替换为 Wrapped

我已经测试过了。它有效。

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 returns Wrapper，不能将Wrapper传入wrap func。这是循环

为什么 componentDidMount 在高阶组件中调用不止一次？

Why componentDidMount in higher order component called more than once?

javascript

reactjs

redux

react-redux