React 'useEffect' hook 替换了多少生命周期方法？

Question

React useEffect可以替代多少生命周期方法？

我发现一篇关于useEffect hook 的文章声称它只能替换三个，即componentDidMount 、 componentDidUpdate和componentWillUnmount 。

其他人呢？

Answer 1

这实际上就是全部。 useEffect() 在组件安装后调用，而不是在每次状态更新时调用。 如果你想把它用作 componentWillUnmout 你必须像这样返回一个清理函数

useEffect(() => {
//something you want to do
return () => console.log('cleanup is running');
});

Answer 2

不，差不多就是这样，尽管当您返回一个函数并且不传递依赖项时它接近componentWillUpdate （它只是在第一次渲染之前不运行）

仔细想想，这是一个非常简单的钩子。 规则非常简单：

您传递给useEffect的函数：

• 每次渲染后运行，除非您提供依赖数组。
• 如果您在依赖项数组中提供，它会在第一次渲染时运行，然后在依赖项发生变化时运行。

您从useEffect函数返回的函数：

• 除非您提供依赖项数组，否则在每次渲染之前运行（除了第一次渲染）。
• 如果您提供依赖项数组，则它会在依赖项已更改或组件卸载的渲染之前运行。

最好不要考虑它取代的生命周期事件。 而是考虑这 4 条规则以及如何让它们在您需要时运行您的功能。