为什么 componentDidMount 在 HOC 中触发，而 componentDidUpdate 不触发？

Question

我正在关注关于高阶组件 (HOC) 的 reactjs 教程。我想要一个 HOC 在 props 改变时记录 props。

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

一开始我以为是因为我用的是HOC。所以我引入了另一个生命周期方法，它是 componentDidMount 并且它正在触发。 componentDidUpdate 没有发射，这是为什么？

Answer 1

因为您在每次渲染时卸载组件，所以组件不会进入 componentDidUpdate 生命周期。

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

为什么 componentDidMount 在 HOC 中触发，而 componentDidUpdate 不触发？

Why does componentDidMount fires in a HOC where as componentDidUpdate does not fire?

reactjs

react-hoc