在React的官方文档中提到了-
如果你熟悉React类的生命周期方法，你可以思考 将useEffect钩子作为componentDidMount, componentDidUpdate和 componentWillUnmount总和。
我的问题是-我们如何在钩子中使用componentWillMount()生命周期方法?
当前回答
componentWillMount已弃用(正如在其他评论中提到的)，原因是我认为它很容易被一个简单的HOC处理。
const withComponentWillMount = (WrappedComponent, handler) => {
return (props) => {
return handler(props) ? <WrappedComponent {...props} /> : null;
}
}
我通常在我的项目中实现这个解决方案。使用此HOC，如果处理程序返回false，则组件内部不运行任何内容，包括钩子。
其他回答
本·卡普的答案对我来说似乎是唯一有效的答案。
但由于我们使用的是函数式方法，另一种方法可以受益于闭包和HoC:
const InjectWillmount = function(Node, willMountCallback) {
let isCalled = true;
return function() {
if (isCalled) {
willMountCallback();
isCalled = false;
}
return Node;
};
};
然后使用它:
const YourNewComponent = InjectWillmount(<YourComponent />, () => {
console.log("your pre-mount logic here");
});
钩子中的React生命周期方法
为了简单的视觉参考，请遵循此图像
正如您在上图中所看到的，对于ComponentWillUnmount，您必须这样做
useEffect(() => {
return () => {
console.log('componentWillUnmount');
};
}, []);
简单地在React.useEffect()中放置一个依赖数组作为第二个参数。如果任何依赖项更新，钩子将导致运行并最终更新组件的副作用。
https://reactjs.org/docs/hooks-reference.html#usememo
记住，传递给useMemo的函数在呈现期间运行。 不要在那里做渲染时通常不会做的事情。 例如，副作用属于useEffect，而不是useMemo。
React组件是一个函数?所以只要让componentWillMount moment成为return语句之前的函数体。
function componentWillMountMomentIsHere() {
console.log('component will mount')
}
function AnyComponent(){
const [greeting, setGreeting] = useState('Hello')
componentWillMountMomentIsHere()
return <h1>{greeting}</h1>
}
