react钩子中的卸载循环行为

Question

我有如下的父组件和子组件：

父级

import React, { useEffect, useState } from "react";
import Cmp1 from "./Cmp1";
const App = () => {
console.log("render App");
const [parentState, setParentState] = useState(null);
const updateParent = state => {
setParentState(state);
};
useEffect(() => {
console.log("mount App");
}, []);
useEffect(() => {
console.log("update App");
return () => {
console.log("unmount App");
};
}, [parentState]);
return (
<div>
<h1>{parentState}</h1>
<Cmp1 updateParent={updateParent} />
</div>
);
};
export default App;

儿童

import React, { useEffect } from "react";
const Cmp1 = ({ updateParent }) => {
console.log('render Cmp1')
useEffect(() => {
console.log("mount Cmp1");
updateParent('From Cmp1')
}, []);
return <h1>Cmp1</h1>;
};
export default Cmp1;

在渲染这两个组件时，我添加了一些生命周期挂钩，下面是输出

render App 
render Cmp1 
mount Cmp1 
mount App 
update App 
render App 
render Cmp1 
unmount App // <= no idea why this came out
update App 

这是密码箱。

我没有卸载组件，只是从子级到父级做了一个简单的状态更新，我没想到会出现这一行，我也不知道为什么卸载循环会在这里运行。

既然我是新手，有人能解释一下吗？

Answer 1

您的钩子依赖于parentState，因此返回的函数不仅在组件卸载时运行。这是一个正常的清理函数，每次在卸载时一次又一次地调用钩子之前都会调用它。

要在组件卸载时进行日志记录，需要使用具有[]依赖关系的效果。

useEffect(() => {
return () => {
console.log('unmount');
}
}, [])

来自文档(我的粗体)：

React究竟什么时候清理效果？React在组件卸载时执行清理。但是，正如我们之前所了解到的，效果会为每个渲染运行，而不仅仅是一次这就是为什么React还会在下次运行效果之前清理上一次渲染的效果我们将在下面讨论为什么这有助于避免错误，以及在出现性能问题时如何选择退出此行为。