首页 > 其他分享 >React useEffect 在组件挂载时运行了两次

React useEffect 在组件挂载时运行了两次

时间:2023-12-18 10:11:55浏览次数:40  
标签:执行 setup React 挂载 useEffect 运行

在使用 useEffect 这个 hook 时,发现useEffect会执行2次

useEffect(() => {
  console.log("执行 useEffect");
}, []);

控制台输出:

执行 useEffect
执行 useEffect

查看 疑难解答 官方文档,官方解释如下:

在开发环境下,如果开启严格模式,React 会在实际运行 setup 之前额外运行一次 setup 和 cleanup

解决方法

可以将 index.tsx 里面的 React.StrictMode 注释掉

root.render(
  // <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  // </React.StrictMode>
);

标签:执行,setup,React,挂载,useEffect,运行
From: https://www.cnblogs.com/zhenshu/p/17910413.html

相关文章

  • 使用React+SpringBoot开发一个协同编辑的表格文档
    前言随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求。通过协同编辑,多个用户可以同时对同一个文档进行编辑和更新,从而提高工作效率和协作能力。本文小编就将为大家介绍如何使用React+SpringBoot简单的开发一个协同编辑的表格文档。环境准备用到的开发......
  • react常用hooks
    useMountconstuseMount=(callback)=>{React.useEffect(callback,[])} useUnmounted1constuseUnmount=(callback)=>{2constcallbackRef=React.useRef(callback)34callbackRef.current=callback56React.useEffect(......
  • React 随记
    React没有响应式的概念useState的两个功能提供更新函数缓存变量数组或对象必须整体更新immutablemutable两个优点useRef的更新函数不会导致视图刷新普通变量也可以在视图中显示但是不会被监听状态的定义需要反向排除考虑并不是所有视图的需要的数据就定义为状态函......
  • Android9.0 vold初始化及外部存储器挂载浅析
    一、概况在Android中,当SD卡U盘等外部存储器插入系统之后,系统会自动挂载。Vold就是负责挂载的,vold的全称是volumedaemon。实际上是负责完成系统的CDROM,USB大容量存储,MMC卡等扩展存储的挂载任务自动完成的守护进程。它提供的主要特点是支持这些存储外设的热插拔。Vold框架图关......
  • react 中国地图
    importReact,{useEffect,useState,useRef}from"react";import*asechartsfrom'echarts/core'importReactEchartsCorefrom'echarts-for-react/lib/core'import{GeoComponent,TooltipComponent,VisualMapCo......
  • react使用antd Table单元格中文字超出时省略
    实现效果使用antd中的Table,设置固定列宽,当文字超出时省略,先看实现效果:部分代码使用ellipsis进行省略,使用Tooltip(引入自antd)展示全部的内容。constTABLE_COL_WIDTH=200;constcolumns=[{title:'项目名称',dataIndex:'name',key:'......
  • react+antd 需求demo实现
    BoxSelectionComponent.tsximportReact,{useState}from'react';import{Modal,Button,Table,message}from'antd';constBoxSelectionComponent:React.FC=()=>{const[modalVisible,setModalVisible]=useState(false);......
  • React Native package.json 控制App的版本号
    原文:https://blog.csdn.net/gu1920948999/article/details/117984844package.json"version":"1.0.0",android配置android/app/build.gradleimportgroovy.json.JsonSlurper.../***获取版本号*/defgetAppVersion(){definputFile=new......
  • docker-挂载数据卷实现不重启Nginx容器展示不同的网页内容
    dockerpullnignxdockervolumecreatetest_volumesdockerrun-d-p80:80-hnginx--namenginx--mounttype=bind,source=/var/lib/docker/volumes/test_volumes,destination=/var/nginx/htmlnginx#-hnginx是必须的,不然就要去更改容器里面的Nginx.conf配置项容器......
  • react-native 在ios中使用react-native-vector-icons图标
    github地址:https://github.com/oblador/react-native-vector-icons1.引入npminstall--savereact-native-vector-iconsios项目引入进入node_modules/react-native-vector-icons文件夹,将Fonts文件夹拖拽到Xcode的项目根目录下,然后在Info.plist文件中添加如下内容:<key>U......