如何解决重新调用钩子useState初始化函数两次,即使根本不更改数据吗?
这里in this example我只是用初始化函数调用useState
:
import React,{ useState } from "react";
import "./styles.css";
export default function App() {
const [data,setData] = useState(() => {
console.log('Getting initial state...');
return {};
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
从控制台可以看到,useState
函数被调用了两次。是否有任何原因,这是正常现象?
解决方法
这是由于Strict Mode
包装了App
而引起的。
在严格模式下,有意地运行某些生命周期方法两次以帮助检测错误。
来自docs:
严格模式无法自动为您检测副作用,但可以通过使其更具确定性来帮助您发现它们。这是通过有意重复调用以下功能来完成的:
类组件的构造函数,呈现器和shouldComponentUpdate方法 类组件的静态getDerivedStateFromProps方法 功能组件主体 状态更新器功能(setState的第一个参数) 传递给useState,useMemo或useReducer的函数
注意: 这仅适用于开发模式。在生产模式下不会重复调用生命周期。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。