首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么onChange上的setState没有给出超过最大更新深度的错误

在React中,当我们使用setState方法更新组件的状态时,React会自动触发组件的重新渲染。然而,如果在setState方法的回调函数中再次调用setState,或者在生命周期方法(如componentDidUpdate)中调用setState,就会导致更新深度超过最大限制的错误。

React为了避免无限循环的更新,设置了一个最大更新深度的限制,默认为50次。当更新次数超过这个限制时,React会抛出一个错误。

但是,为什么在onChange事件处理函数中调用setState时没有触发超过最大更新深度的错误呢?这是因为在React中,onChange事件是在用户输入时触发的,而用户输入的频率是不可预测的。因此,React并不会对onChange事件中的setState调用进行限制。

然而,虽然React不会直接限制onChange事件中的setState调用,但我们仍然需要注意潜在的问题。如果在onChange事件处理函数中频繁地调用setState,可能会导致性能问题,因为每次调用setState都会触发组件的重新渲染。为了避免这种情况,我们可以考虑使用debouncethrottle等技术来限制setState的调用频率,或者使用其他优化方法来减少不必要的重新渲染。

总结起来,onChange事件上的setState没有给出超过最大更新深度的错误,是因为React并不会对onChange事件中的setState调用进行限制。然而,我们仍然需要注意在onChange事件处理函数中频繁调用setState可能导致的性能问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

受控组件和非受控组件

onChange事件与setState()结合更新state属性,就能达到控制用户输入过程中表单发生操作,React以这种方式控制取值表单输入元素就叫做受控组件。...在React中定义了一个input输入框的话,它并没有类似于Vue里v-model这种双向绑定功能,也就是说我们并没有一个指令能够将数据和输入框结合起来,用户在输入框中输入内容,然后数据同步更新。...,它是自己维护了一个state,这个state并不是我们平常看见this.state,而是每个表单元素抽象state,这样的话就能根据用户输入自己进行UI更新,如果我们想要控制输入框内容,...这段Warning其实给出了对于这个问题解决方案,我们只需要对组件onChange事件来监听输入内容改变并使用setState更新this.state.username即可,如此我们在当前组件中能够控制这个表单元素值...每当表单值发生变化时,调用onChange事件处理器。 事件处理器通过合成对象event拿到改变后状态,并更新应用state。 SetState触发视图重新渲染,完成表单组件值更新

1.5K10

一文带你梳理React面试题(2023年版本)

语法糖,使用jsx等价于React.createElementjsx是js语法扩展,允许在html中写JS;JS是原生写法,需要通过script标签引入为什么在文件中没有使用react,也要在文件顶部...以后),而不是绑定在DOM元素(作用:减少内存开销,所有的事件处理都在container,其他节点没有绑定事件)React自身实现了一套冒泡机制,不能通过return false阻止冒泡React通过...state使用setState只会返回最后一次结果,因为它不是立刻就更新,而是先放在队列中,等时机成熟在执行批量更新。...React18以后,使用了createRoot api后,所有setState都是异步批量执行十二、fiber架构什么是fiber,fiber解决了什么问题在React16以前,React更新是通过树深度优先遍历完成...增量渲染是为了实现任务可中断、可恢复,并按优先级处理任务,从而达到更顺滑用户体验Fiber可中断、可恢复怎么实现fiber是协程,是比线程更小单元,可以被人为中断和恢复,当react更新时间超过

4.2K122

记一次React渲染死循环

这里仅单纯分析一下,为什么这样写就会陷入死循环? 二、代码段分析 从代码段不难看出,这段代码初衷以及期望运行逻辑为: 0)父组件 App 将 value 和 onChange 方法传入子组件。...至此,我们 React更新队列中就有了两个更新计划,前面 useState 分析中有说明,React 会将多次 setState 合并为同一次。 因此接下来会执行合并之后 state UI渲染。...第2步:合并渲染 经过第一步之后,会合并前面的两次 setState 触发 UI 更新计划,进行一轮新综合性组件 UI 更新。...因此,我们不难推断出,接下来同样会产生两次 setState 触发 UI 更新计划。 而这次更新结果就是 value 和 valueObj 再次互换。...此为,除了直接原因外 其根本原因是代码组织结构没有组织好,业务组件模块数据处理没有做好分层,导致数据处理分散。

1.4K20

concent 骚操作之组件创建&状态更新

这里一个示例项目文件组织结构,不同的人可能有不同理解方式和组织习惯,这里只是以一个基本社区公认通用结构作为范本来为后面的代码解读做基础,实际文件组件方式用户可以根据自己情况做调节|____runConcent.js...[apyor7k0re.png] concent如何看待状态更新 上面的所有组件示例里,我们都只是完成模块状态获取和展示,并没有做任何更新操作,接下来我们将对组件加入状态更新操作行为。...利用setState完成状态更新 因为concent已接管了setState行为,所以对于使用者来说,setState就可以完成你想要状态更新与状态同步。...使用sync更新 当然如果对于这种单个key更新,我们也可以不用写setState,而是直接使用concent提供工具函数sync来完成值提取与更新 // 改写HookComp使用sync来更新,...,你都可以按需采取不同策略,而且concent里hook使用方式是遵循着reducer承载核心业务逻辑,dispatch派发修改状态经典组织代码方式,但是并没有强制约束你一定要怎么写,给予了你最大自由度和灵活度

88653

一天梳理完react面试题

对新旧两棵树进行一个深度优先遍历,这样每一个节点都会一个标记,在到深度遍历时候,每遍历到一和个节点,就把该节点和新节点树进行对比,如果有差异就放到一个对象里面遍历差异对象,根据差异类型,根据对应对规则更新...4)错误处理阶段componentDidCatch(error, info),此生命周期在后代组件抛出错误后被调用。 它接收两个参数∶error:抛出错误。...受控组件更新state流程:可以通过初始state中设置表单默认值每当表单值发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后状态,并更新组件state一旦通过setState...=id0值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能为什么 React 要用 JSX?...这样做, React会知道发生的确切变化,并且通过了解发生变化后,在绝对必要情况下进行更新DOM,即可将因操作DOM而占用空间最小化。setState 是同步异步?为什么?实现原理?

5.5K30

通俗易懂React事件系统工作原理

图片检查这些一个或多个原生事件类型有没有注册过,如果有则忽略。图片如果这个原生事件类型没有注册过,则注册这个原生事件到 document ,回调为React提供dispatchEvent函数。...React 并没有将我们业务逻辑里listener绑在原生事件,也没有去维护一个类似eventlistenermap东西存放我们listener。...React 17 中事件系统有哪些新特性React 17 目前已经发布了, 官方称之为没有新特性更新, 对于使用者而言没有提供类似 Hooks 这样爆炸特性,也没有 Fiber 这样重大重构,而是积攒了大量...其中变化最大就数对事件系统改造了。...下面是笔者列举一些事件相关特性更新调整将顶层事件绑在container,ReactDOM.render(app, container);图片将顶层事件绑定在 container 而不是 document

1.5K00

antd mobile 作者教你写 React 受控组件和非受控组件

那有没有办法在 Child 组件 render 阶段就直接更新 value 状态呢? 并不可以,React 不允许我们在 render 过程中调用 setState。...GitHub 收到了一条 issue:TabBar onChange 为什么在同 key 情况也会触发 #5409[1]。...对用户来说,点击同一个 Tab 并没有触发切换,也因此不应该触发 onChange 事件,所以我们还需要额外增加一点判断,来解决这个 bug: 在 antd-mobile 中,我们也有一个这样 usePropsValue...函数中调用 setState ,只是限制了只能触发当前组件自己 state 更新。...” 参考资料 [1] TabBar onChange 为什么在同 key 情况也会触发 #5409: https://github.com/ant-design/ant-design-mobile

1.7K10

常见react面试题(持续更新中)

,而是给react用,大概作用就是给每一个reactNode添加一个身份标识,方便react进行识别,在重渲染过程中,如果key一样,若组件属性有所变化,则react只更新组件对应属性;没有变化则不更新...但在 React 中会有些不同,包含表单元素组件将会在 state 中追踪输入值,并且每次调用回调函数时,如 onChange更新 state,重新渲染组件。...所以,如果想要修改state值,就需要使用setState,而不能直接修改state,直接修改state之后页面是不会更新。...props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性变化,通过调用this.setState()来更新组件状态,旧属性还是可以通过this.props来获取,...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。

2.6K20

React 中 getDerivedStateFromProps 三个场景

设计半受控组件原则就是尽可能把控制权交给用户,即用户传了某个参数,就是用用户参数;如果用户没有传参数,就是用组件内部 state。...={this.onChange} />; } } 鉴于 getDerivedStateFromProps设计,我们可以安全把 props值都同步到 state,这样在使用时候只需要从 state...注意,在这里我们去判断 props字段是不是我们要类型(在这里是 string)而不是判断 props上有没有这个字段,因为用户可能封装了一层组件,导致 props上有这个字段,但是它值是 undefined...={this.onChange} onBlur={this.onBlur} /> ); } } 而上层组件更新和组件本身 setState都会触发 getDerivedStateFromProps...,我们可以通过比较 props是不是同一个对象来知道这次更新是由上层触发还是组件本身触发,当 props不是同一个对象时,说明这次更新来自上层组件,例如: class SpecialInput extends

1.7K10

React受控组件和非受控组件

在React中,可变状态通常保存在组件状态属性中,并且只能使用 setState() 进行更新,而呈现表单React组件也控制着在后续用户输入时该表单中发生情况,以这种由React控制输入表单元素而改变其值方式...比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件state。...2、每当表单值发生变化时,调用onChange事件处理器 3、事件处理器通过事件对象event拿到改变后状态,并更新组件state 4、一旦通过setState方法更新state,就会触发视图重新渲染...受控组件实现方式,就是设置state,使用事件调用setstate更新数据和视图。 非受控组件,避开state,使用ref等等方式,更新数据和视图。...2、非受控组件使用场景:一般用于无任何动态初始值信息情况。例如:form表单创建信息时,input表单元素都没有初始值,需要用户输入情况。

3.6K10

React学习笔记(三)—— 组件高级

例如,当我们实现一个ListItem组件时候,这个组件封装了一个li元素,那么我们不应该在li元素直接设置key属性,因为没有意义,key是用来跟踪数组才有意义,于是我们在NumberList组件使用到...2.2.2、默认值 在 React 渲染生命周期时,表单元素 value 将会覆盖 DOM 节点中值。在非受控组件中,你经常希望 React 能赋予组件一个初始值,但是不去控制后续更新。...在一个组件已经挂载之后去更新 defaultValue 属性值,不会造成 DOM 任何更新。...相反,在生产模式下,错误不会冒泡,这意味着任何根错误处理器只会接受那些没有显式地被 componentDidCatch() 捕获错误。...如果不是,那么它不是一个状态,这种情况更适合定义为组件一个普通属性 3.4.2、正确修改state ①不能直接修改state,需要使用setState() ②state更新是异步 React会将多次

8.2K20

92.精读《React PowerPlug 源码》

,很多 诸如受控组件 onChange 临时保存无意义 Value 找不到合适地方存储。...set 回调函数触发后调用 setState 更新 value。 reset 就是调用 set 并传入 this.props.initial 即可。 2.2....用法 值得注意是,setState 支持函数和值作为参数,是 Value 组件本身支持,State 组件额外适配了 setState 另一个特性:合并对象。...实现方式是,在组件内部维护一个 Interval 定时器,实现了组件更新、销毁时计时器更新、销毁操作,可以认为这种定时器生命周期绑定了 React 组件生命周期,不用担心销毁和更新问题。...另外 Hooks 版 PowerPlug 已经 4 个月没有更新了(非官方):react-powerhooks,也许下一个维护者/贡献者 就是你。

1.2K30

使用 useState 需要注意 5 个问题

然而,没有人直接告诉你是,根据组件在该状态下期望,使用错误类型值初始化 useState 可能会导致应用程序中意外行为,例如无法呈现 UI,导致黑屏错误。...没有使用可选链 有时,仅仅使用预期数据类型初始化 useState 往往不足以防止意外空白页错误。当试图访问深嵌套在相关对象链中深嵌套对象属性时,尤其如此。...但是,直接更新状态是一种不好做法,在处理多个用户使用实时应用程序时可能会导致潜在错误为什么?因为与你所想相反,React 不会在单击按钮时立即更新状态。...这个无意错误经常困扰那些仅使用 setState(newValue) 函数直接更新状态应用程序。...为什么?因为 setState() 将返回或传递给它任何值赋值为新状态。 一种典型老式方法是创建一个新对象引用,并将前一个用户对象分配给它,直接修改用户名。

4.9K20

react面试题笔记整理(附答案)

为什么它很重要?组件状态数据或者属性数据发生更新时候,组件会进入存在期,视图会渲染更新。...而replaceState 是完全替换原来状态,相当于赋值,将原来 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了。React中props为什么是只读?...对新旧两棵树进行一个深度优先遍历,这样每一个节点都会一个标记,在到深度遍历时候,每遍历到一和个节点,就把该节点和新节点树进行对比,如果有差异就放到一个对象里面遍历差异对象,根据差异类型,根据对应对规则更新...受控组件更新state流程:可以通过初始state中设置表单默认值每当表单值发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后状态,并更新组件state一旦通过setState...在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新回调。为什么使用jsx组件中没有看到使用react却需要引入react?

1.2K20

【React】1413- 11 个需要避免 React 错误用法

执行 setState 后直接使用 state 使用 useState + useEffect 时出现无限循环 忘记在 useEffect 中清理副作用 错误使用布尔运算符 没有定义组件参数类型 把字符串当做数值传递到组件...没有以大写字母开头组件名称 错误为元素绑定事件 1....这是因为 setState()是异步,当执行 setState()时,会把真正更新操作放到异步队列中去执行,而接下来要执行代码(即console.log这一行)是同步执行,所以打印出来 state...解决方法 只需要将要执行后续操作封装成函数,作为 setState()第二个参数,该回调函数会在更新完成后执行。 this.setState({ name: "Hello Chris1993!"...如果您觉得本文不错,欢迎点赞评论关注,您支持是我分享最大动力。

1.6K20

从componentWillReceiveProps说起

: 引发当前组件更新 && (context发生变化 || 父组件render结果发生变化,即当前组件需要rerender) 注意,这里并没有对props做diff: React doesn’t make...react/packages/react-reconciler/src/ReactFiberBeginWork.js) 所以在首次渲染时也会调用,这是与componentWillReceiveProps相比最大区别...时无条件更新state,会导致通过setState()手动更新state被覆盖掉,从而出现非预期状态丢失: When the source prop changes, the loading state...实现局部状态重置 其中,第一种方法只适用于class形式组件,后两种则没有这个限制,可根据具体场景灵活选择。...一边通过props计算state,一边手动setState更新,此时该state有两个来源,违背了组件数据单一源原则 解决这个问题关键是保证单一数据源,杜绝不必要拷贝: For any piece

2.3K20

React入门五:事件处理

有状态组件和无状态组件 无状态组件:函数组件 有状态组件:类组件 状态(state)既数据 函数组件没有自己状态,只负责数据展示(静) 类组件有自己状态,负责更新UI,让页面 “动”...()修改状态 状态是可变 语法:this.setState({要修改数据}) 注意:不要直接修改state中值,这是错误!!...// 正确 this.setState({ count:this.state.count+1 }) // 错误 this.state.count += 1 setState()作用:1.修改state...2.更新UI 计数器 state ={ count : 10, test : 2 // 当对象有多个变量时 setState中只需写修改那个变量 } render...="text" value={this.state.txt} onChange={e=>this.setState({txt:e.target.value})}/> 文本框 改变值 class App

1.8K30

百度前端高频react面试题(持续更新中)_2023-02-27

所谓 Pre-commit,就是说我在这个阶段其实还并没有更新真实 DOM,不过 DOM 信息已经是可以读取了; Commit 阶段:在这一步,React 会完成真实 DOM 更新工作。...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...受控组件更新state流程: 可以通过初始state中设置表单默认值 每当表单值发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后状态,并更新组件state 一旦通过...componentDidMount方法中代码,是在组件已经完全挂载到网页才会调用被执行,所以可以保证数据加载。此外,在这方法中调用setState方法,会触发重新渲染。...对新旧两棵树进行一个深度优先遍历,这样每一个节点都会一个标记,在到深度遍历时候,每遍历到一和个节点,就把该节点和新节点树进行对比,如果有差异就放到一个对象里面 遍历差异对象,根据差异类型,根据对应对规则更新

2.3K30
领券