import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
const [state, setState] = useState(0);
useEffect(() => {
return () => {
// setState(1)
console.log("inside cleanup");
};
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{console.log(state)}
<h2>Start editing to see some magic happen!</h2>
</div>
);
}cleanup 中的 console.log() 正在浏览器中得到控制台。我不确定为什么会发生这种情况。根据我的概念，当组件在状态更改时更新并且该状态是依赖数组的一部分，或者根本没有依赖数组时，应该调用清理
回答1
如果您将应用程序包装在 <StrictMode> 中，您的组件将被挂载/卸载/重新挂载以识别潜在的不安全生命周期。这仅在开发模式下发生。
回答2
useEffect 清理功能不仅在我们的组件要卸载时运行，它还在执行下一个预定效果之前运行。
事实上，useEffect执行后，下一个调度效果通常是基于依赖（数组）。
在 strict 模式下，开发构建， useEffect 执行两次。因此，在下一个预定效果之后运行清理。来自 react https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
每次渲染都会运行效果，而不仅仅是一次。这就是为什么 React 还会在下次运行效果之前清理上一次渲染中的效果。
回答3
import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
const [state, setState] = useState(0);这里的所有代码只被调用一次
useEffect(() => {
return () => {
// setState(1)
console.log("inside cleanup");
};
}, []);这里的所有代码都会在每次状态更新、第一次渲染或更新其父级时调用
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{console.log(state)}
<h2>Start editing to see some magic happen!</h2>
</div>
);}