Reactjs 为什么componentDidMount会在HOC中激发，而as componentDidUpdate不会激发？

我正在学习关于高阶组件（HOC）的reactjs教程。我想要一个HOC在道具更改时记录道具

import React, { useState } from 'react';

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Component was mounted");
    }
    componentDidUpdate(prevProps) {
      console.log("Current props: ", this.props);
      console.log("Previous props: ", prevProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />
    }
  }
}

class CustomDivElement extends React.Component{
  render(){
  return <div>{this.props.text}</div>
  }
}

function App(props) {
  const [text, setText] = useState("");
  const EnhancedComponent = logProps(CustomDivElement);
  return (
    <div tabIndex="0" className="App ui container">
      <input
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)} />
      <EnhancedComponent text={text} />
    </div>
  )
}

export default App

import React，{useState}来自“React”；
函数logProps（WrappedComponent）{
返回类扩展了React.Component{
componentDidMount（）{
日志（“组件已安装”）；
}
componentDidUpdate（prevProps）{
log（“当前道具：”，this.props）；
日志（“以前的道具：”，prevProps）；
}
render（）{
//将输入组件包装在容器中，而不会对其进行变异。很好！
返回
}
}
}
类CustomDivElement扩展React.Component{
render（）{
返回{this.props.text}
}
}
功能应用程序（道具）{
const[text，setText]=useState（“”）；
const EnhancedComponent=logProps（CustomDivElement）；
返回(
setText（e.target.value）}/>
)
}
导出默认应用程序

---

起初我认为这是因为我使用了HOC。因此，我介绍了另一种生命周期方法，即

componentDidMount

，它正在启动。

componentdiddupdate

没有启动，这是为什么？

因为在每次渲染时都卸载组件，所以组件无法进入

componentdiddupdate

生命周期

function App(props) {
  // Remount on every render
  const EnhancedComponent = logProps(CustomDivElement);
  ...
}

相反，在使用HOC或任何其他组件时，您希望挂载它一次：

// export default logProps(CustomDivElement)
const EnhancedComponent = logProps(CustomDivElement);

function App(props) {
  const [text, setText] = useState("");
  return (
    <div tabIndex="0" className="App ui container">
      <input
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)} />
      <EnhancedComponent text={text} />
    </div>
  )
}

//导出默认logProps（CustomDivElement）
const EnhancedComponent=logProps（CustomDivElement）；
功能应用程序（道具）{
const[text，setText]=useState（“”）；
返回(
setText（e.target.value）}/>
)
}
我可能会说CRAP，因为我正在学习Error／JS，但是const在函数的外部（本地/全局const）中有不同的含义，比如C++吗？是否尝试在App（）函数外部创建增强组件？编辑：AAAA和丹尼斯·贝娄证实了我的想法^^