使用钩子进行两次React渲染



为什么我的组件渲染两次?

export default function App() {
console.log("asd");
const [count, setCount] = useState(0);
return (
<div>
<Title count={count} />
<button
onClick={() => {
setCount(count + 1);
}}
/>
</div>
);
}

//console= "asd" "asd"

它渲染了两次,但如果我删除useState,它就不会发生

您的应用程序可能被React.StrictMode包装。StrictMode是一种突出应用程序中潜在问题的工具。

StrictMode当前有助于:

识别具有不安全生命周期的组件

关于遗留字符串参考API使用的警告

关于不推荐使用的findDOMNode使用的警告

检测意外副作用

正在检测遗留上下文API

严格模式不能自动为您检测副作用,但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来实现的:

类组件构造函数、渲染器和shouldComponentUpdate方法

类组件静态getDerivedStateFromProps方法

功能组件主体(您的应用程序是功能组件(

状态更新器函数(setState的第一个参数(

传递给useState、useMemo或useReducer 的函数

更多详细

对于React 18:在开发模式中,组件将重新安装一次!在useEffect中处理它,并为过时的响应使用清理函数。

来自下面发布的链接,由核心反应团队成员撰写:

一个原因是,如果您使用严格模式运行,我们现在将重新装载每个组件在开发过程中一次。(如果这看起来很漂亮侵入性,考虑到每次您将文件保存到无论如何都要进行开发--以获取您的代码编辑。此行为在到目前为止已经两年了,所以这并不是什么新鲜事。(这个通常不会坏如果您的代码忽略了过时的响应,则返回您的代码。如果没有意味着你有需要修正的比赛条件——以下是如何通过添加清理功能来修复它们。如果使用外部缓存(或者自己实现(,你甚至看不到重复请求。但是,如果您的代码可以处理无序到达的响应。(如果他们也是烦人,你可以完全删除严格模式,但我不明白为什么你需要。(

https://www.reddit.com/r/reactjs/comments/vi6q6f/what_is_the_recommended_way_to_load_data_for/

最新更新