reactjs - 为什么在第一次渲染时会调用 useEffect 清理函数?

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>
  );

}

相似文章

最新文章