首页 前端知识 useEffect默认执行两次解决方案

useEffect默认执行两次解决方案

2024-04-23 21:04:53 前端知识 前端哥 645 222 我要收藏
今天写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调用了~

成功解决~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5860.html
标签
react.js
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!