React hook 判断语句内不能使用useEffect(乱序问题)

2023-11-15

const Parent = () => {

        const [count, setCount] = useState(0);

        // -------------------------------------------------------

        // 如果这样写控制台会报错, 原因继续往下看

        if (count > 1) {

                useEffect(() => {

                        console.log('大于1')

                }, []);

        }

// -------------------------------------------------------

// -------------------------------------------------------

// 如果这样写控制台不会报错,但不可以这么写

if (count > 1) {

        useEffect(() => {

                console.log('大于1')

        }, []);

} else {

        useEffect(() => {

                console.log('小于1')

        }, []);

}

// -------------------------------------------------------

        return <div>{count}</div>

}

结论:

1. hooks渲染是从上到下依次执行,在if语句内使用的话,由于第一次未执行到useEffect,后面render时却又突然检测到了,就会导致控制台报错(可以理解成渲染时突然发现一个未知的useEffect,老版本不会报错,但是新版本将这个问题修复了所以控制台会报错)。

2. 即使在if语句后面添加else,由于第一次执行了else语句内的useEffect,且无依赖只能执行一次,所以即使后面渲染时执行了第一个useEffect(if内的),但实际上并不会去执行他,因此虽然不会报错但是代码的执行不符合我们想要的。

3. 综上所述,使用hooks时,不要在判断语句内使用useEffect。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React hook 判断语句内不能使用useEffect(乱序问题) 的相关文章

  • 虚拟列表的实现思路(附带react代码)

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算
  • React 初识之Umi项目搭建实战

    一 创建项目 创建之前需要安装 Node js 和 npm yarn 这俩个环境 在WebStorm里面创建一个项目 输入命令 yarn create umi 弹出选项 这里我们选择第二项APP 选择是否使用typescript 这里选no
  • Ionic3开发教程 - 开发(2)

    Ionic3开发系列教程Ionic3开发教程 环境准备 1 Ionic3开发教程 开发 2 Ionic3开发教程 发布Android版本 3 Ionic3开发教程 发布IOS版本 4 Ionic3开发教程 更新 5 本文中介绍的Ionic3
  • Ant Design Pro 从零到一教程

    说在最前面的话 可是能全网唯一适合小白的antd教程 因为我找了接近一个周的教程 无论是视频 博客等等都没有比较完整的教程 所以才说这可能是唯一全网适合小白教程 文章末有相关学习链接 适用人群 喜欢看文字或者代码学习的人 学习的人掌握基本的
  • React页面设计初体验

    1 定制路由 export default login path login name login component layouts BlankLayout routes path login component Login Index
  • Vite搭建react+ts项目

    创建一个react项目 首先需要打开终端 进行vite的引入 yarn create vite 使用react模板创建项目 yarn create vite react test template react cd react test y
  • 组件间样式覆盖问题--CSS Modules

    1 组件间样式覆盖问题 问题 CityList 组件的样式 会影响 Map 组件的样式 原因 在配置路由时 CityList 和 Map 组件都被导入到项目中 那么组件的样式也就被导入到项目中了 如果组件之间样式名称相同 那么一个组件中的样
  • 三、react中类组件和函数组件

    简介 本篇我们只要介绍react中类组件与函数组件两种组件的写法 两者的优缺点 同时对在我们的项目开发中该使用类组件还是函数组件进行思考分析 废话不多说进入正题 类组件 设计思路 类组件时面向对象编程的思想 在其中我们去设计类组件时使用st
  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su
  • 关于Vue.js和React.js,听听国外的开发者怎么说?

    VueJS 与 ReactJS 到底怎么样如何 听听别人怎么说 使用所有新的库和框架 很难跟上所有这些库和框架 也就是说 这就需要您决定哪些是值得花时间的 让我们看看人们说什么 和Vue JS一起工作是很愉快的 我发现学习曲线很浅 然而 这
  • React的超详细讲解

    React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器 module bundler 当 webpack 处理应用程序时 它会递归地构建一个依赖关系图 dependency
  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a
  • React(一):React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • error Missing “key“ prop for element in array react/jsx-key

    react遇到一个奇怪的问题 error Missing key prop for element in array react jsx key 检查了jsx中使用map的 都定义了key div otherList map item an
  • reactJS 干货(reactjs 史上最详细的解析干货)

    一 State和 Props state是状态机 应该包括 那些可能被组件的事件处理器改变并触发用户界面更新的数据 譬如需要对用户输入 服务器请求或者时间变化等作出响应 不应该包括 计算所得数据 React组件 在render 里使用pro
  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染
  • React Jsx转换成真实DOM过程?

    面试官 说说React Jsx转换成真实DOM过程 一 是什么 react 通过将组件编写的 JSX 映射到屏幕 以及组件中的状态发生了变化之后 React 会将这些 变化 更新到屏幕上 在前面文章了解中 JSX 通过 babel 最终转化
  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

随机推荐

  • 图片清晰度,分辨率,像素总结

    像素 像素是一个个小方块 是构成位图的基本单位 将图片放大即可看出来 如图 分辨率 显示分辨率是指像素的总数量 如上图的2200 1400 也就是宽有2200个像素 高有1400个像素 图像分辨率是指每英寸所包含的像素个数 如上图的72像素
  • 基础网络拓扑的配置

    要求 全网可达 拓扑结构 使用的设备 1台路由器 2台交换机 4台电脑 解决网络拓扑 1 确定广播域的个数 2 分配网段 3 配置IP地址 优先配置路由器 确定广播域的个数 路由器有两个接口有连线 分为两个不同的广播域 分配网段 我采用19
  • Invalid contextPath ‘/xxx‘: must match the start of requestPath: ‘//xxx/yyy‘

    记录一个升级spring boot 版本从2 1升级到2 6之后的错误 java lang IllegalArgumentException Invalid contextPath admin must match the start of
  • java jar killed_容器中Java 程序OOMKilled原因浅析

    背景 业务的容器化刚刚搞完 线上开始告警 容器重启 容器重启 describe pod 查看原因是OOMKilled 分析 OOMKilled 是pod 中的进程使用的内存超过了 spec containers resources limi
  • 指针(一)

    学习c语言 不学指针 等于没学 可见指针在c语言中有多重要 指针是C语言中的一个重要概念及其特点 也是掌握C语言比较困难的部分 指针定义 指针也就是内存地址 指针变量是用来存放内存地址的的变量 指针的作用是 通过指针不仅可以对数据本身 还可
  • OpenGL ES着色器语言(GLSL ES)规范 ——下篇

    文章目录 前言 分支和循环 if if else for continue break discard 着色器内置变量 函数 函数定义 规范声明 webgl内置函数 存储限定字 const attribute uniform varying
  • MYSQL 8数据库原理及应用(徐丽霞 微课版)——第一章知识要点

    目录 数据库的基本概念 数据库管理技术的发展阶段 数据库的体系结构 数据模型 关系运算 数据库的基本概念 信息与数据库 数据 Data 是描述事物的符号记录 是数据库中存储的基本对象 信息 信息的传递需要物质载体 且信息的获取和传递都要消耗
  • 业务高速增长场景下的稳定性建设实战

    背景 静儿在2017年8月25日怀着 再也不要下班时间收到报警 的美好期待加入美团金融智能支付负责核心交易 结果入职后收到的报警一天紧似一天 核心交易是整个智能支付的核心链路 承担着智能支付百分之百的流量 下面是我们的日单量增长曲线 从图中
  • postman界面变成了左右结构怎么办

    前些天发现了一个巨牛的人工智能学习网站 通俗易懂 风趣幽默 忍不住分享一下给大家 点击跳转到教程 在左上角 file settongs中设置一下
  • Linux下编辑文件并保存

    第一步 cd到该文件的目录下 第二步 vi 要编辑的文件名 进入普通模式 可以查看文件内容 第三步 输入 i 进入编辑模式 开始编辑文本 第四步 编辑之后 按ESC退出到普通模式 第五步 在普通模式下 输入 进入命令模式 第六步 在命令模式
  • ADCS攻击利用

    ADCS攻击利用 个人公众号创世信安 一 ADCS相关介绍 1 ADCS AD CS证书服务 SSL证书 可以部署企业根或者独立根建立SSL加密通道 和其他服务证书的区别在于加密强度 本次利用的漏洞产生的原因是ADCS支持的服务器角色功能错
  • spring-boot整合基本jdbc(基于oracle数据库)

    点击有惊喜 https mp weixin qq com s 2My JPTIaF02w70J CRM4A 快速搭建一个web工程 搭建完一个web工程 要想连接上oracle数据库 还得进行以下操作 1 在pom xml中引入jdbc连接
  • 奋斗的人生很精彩

    奋斗 是人生道路上永恒的主题 它意味着不懈的努力 不断的追求 以及对梦想的执着追求 在我们的人生旅途中 每个人都有自己的目标和梦想 有些人梦想成为一名成功的商人 有些人希望成为一名伟大的科学家 而有些人则渴望成为一名杰出的艺术家 无论我们的
  • Linux下线程池的代码

    此博客仅为了存放代码 Linux 加锁 线程池 头文件 include
  • 在jupyter Notebook上绘制动态曲线

    在jupyter Notebook上绘制动态曲线 1 前言 2 实现原理 3 实现源码 1 前言 在上一篇文章中介绍了在如Pycharm VsCode IDEA等 非交互式编程软件中绘制动态曲线的实现原理 那么问题来了 在如jupyter
  • Empowering Language Models with Knowledge Graph Reasoning for Open-Domain Question Answering

    本文是LLM系列文章 针对 Empowering Language Models with Knowledge Graph Reasoning for Open Domain Question Answering 的翻译 用知识图谱推理增强
  • flask入门

    一 falsk简介 Flask是一个使用 Python 编写的轻量级 Web 应用框架 其 WSGI 工具箱采用 Werkzeug 模板引擎则使用 Jinja2 Flask使用 BSD 授权 Flask是一个轻量级的可定制框架 使用Pyth
  • 树莓派4B-使用 RPI.GPIO 模块的脉宽调制(PWM)功能

    脉宽调制 PWM 是指用微处理器的数字输出来对模拟电路进行控制 是一种对模拟信号电平进行数字编码的方法 在树莓派上 可以通过对GPIO的编程来实现PWM 创建一个 PWM 实例 1 p GPIO PWM channel frequency
  • sonar 配置sonarqube分析unity中的C# 代码

    参考文档 使用SonarQube对Unity项目进行代码分析的问题记录 zerozabuu 博客园 一文搞定 SonarQube 接入 C NET 代码质量分析 狂师 博客园 需要分析的代码是unity下的C 代码 配置流程主要参考上面两个
  • React hook 判断语句内不能使用useEffect(乱序问题)

    const Parent gt const count setCount useState 0 如果这样写控制台会报错 原因继续往下看 if count gt 1 useEffect gt console log 大于1