当容器中的输入值更改时，不会记录 ComponentDidUpdate Inside HOC

Question

import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
    return class extends React.Component {
        componentDidUpdate(prevProps) {
        console.log("inside componentDidUpdate");
       }
        componentDidMount() {
            console.log("insideComponentDidMount");
        }
        render() {
            return <WrappedComponent {...this.props} />;
        }
     };
  }
const Container = (props) => {
    const [name, setName] = useState("");
    const handleInputChange = (value) => {
    setName(value);
    };
   return (
      <React.Fragment>
          <input value={name} onChange={(e) => handleInputChange(e.target.value)} />
      </React.Fragment>
       );
   };

export default logProps(Container);

此处容器组件包装在 logProps HOC 中。我想在输入更改后触发组件 Did Update 函数。我使用了与官方 React 文档中描述的相同的 HOC。

Answer 1

这里有很多东西要解释

组件是虚拟（无状态）或智能（有状态）
组件将在 props 改变或状态改变时呈现 ()

让我们从上到下尊重层次结构

HOC 组件呈现 2.componentDidMount 触发
您现在可以输入 child 输入内容
您更改值
handleInputChange 被解雇
setName 现在使用新值调用
Container 组件 re-renders duo to ()

我们不希望 HOC 现在更新，因为到目前为止它没有发生任何奇怪的事情。如果你想在每个字符更改中调用 componentDidUpdate，你必须从 logProps(Component) parent

传递道具

像这样

import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
    return class extends React.Component {
        componentDidUpdate(prevProps) {
        console.log("inside componentDidUpdate");
       }
        componentDidMount() {
            console.log("insideComponentDidMount");
        }
        render() {
            return <WrappedComponent {...this.props} />;
        }
     };
  }
const Container = ({name, handleInputChange}) => {
   
   return (
      <React.Fragment>
          <input value={name} onChange={(e) => handleInputChange(e.target.value)} />
      </React.Fragment>
       );
   };

export default logProps(Container);

// parent.js
const Parent = () => {
  const [name, setName] = useState("");
  return <LogPropsContainer handleInputChange={setName} name={name} />
}

现在您将看到每个字符更改的日志codesandbox

记录生命周期的新Hook版本

用with关键字启动HOC很方便

const withLogger = (Component) => {
  function HOC(props) {
    useEffect(() => {
      console.log("component did mount", { CDM: props });
      // eslint-disable-next-line
      return () => {
        console.log("component did unmount", { CDUM: props });
      };
    }, []);

    useEffect(() => {
      console.log("component did update", { CDU: props });
      return () => {
        console.log("component did update rerender", { rerender: props });
      };
    });

    return <Component {...props} />;
  };

  // rename component for better debuging
  if (process.env.NODE_ENV !== 'production') {
   const name = Component && (Component.displayName || Component.name)
   HOC.displayName = `Logger(${name || 'Anonymous' })`
  }
};

当容器中的输入值更改时，不会记录 ComponentDidUpdate Inside HOC

ComponentDidUpdate Inside HOC is not being logged when input value Changes in Container

reactjs

higher-order-components

记录生命周期的新Hook版本