今天写demo的时候使用最高版本的react,发现useEffect出了小问题,记录一下。
此出处是 create-react-app 的创建的app
代码如下:
useEffect(() => {
console.log("useEffect调用了~");
},[]);
控制台输出:
useEffect调用了~
useEffect调用了~
查阅发现是react18将useEffect的默认运行改为了两次。
这个更改只有在开发模式才会发生,且只在只在 strict mode 发生,恰恰如此无疑令很多开发者感觉很蛋疼。
解决方法
可以删掉 index.tsx 文件里的 StrictMode,把这样的
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
改为这样的
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(<App />);
再看一下控制台输出:
useEffect调用了~
成功解决~