ComponentDidUpdate内部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

这里有很多事情需要解释

1. 组件是虚拟(无状态)或智能(有状态)
2. 组件将在道具改变或状态时渲染(🌟)

让我们从上到下尊重层次

1. HOC组件渲染2.componentDidMount火灾
2. 你现在可以输入你的子输入
3. 你改变
的值
4. handleInputChange被触发
5. setName现在用一个新值
调用
6. Container组件重新渲染duo到(🌟)

我们不期望HOC现在更新，因为到目前为止没有什么特别的事情发生。如果你想在每次字符更改中调用componentDidUpdate，你必须从logProps(Component)父类传递props

像这样的

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' })`
}
};