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

为什么React onChange在不丢失焦点的情况下也能正常工作?

React中的onChange事件是用于监听表单元素的值变化的事件。它可以在用户输入内容时触发,并且在不丢失焦点的情况下也能正常工作。这是因为React使用了虚拟DOM的概念,通过比较前后两次渲染的虚拟DOM树的差异,只对有变化的部分进行实际的DOM操作,从而提高了性能。

具体来说,当用户在表单元素中输入内容时,React会通过onChange事件监听到输入的变化,并将变化的值更新到组件的状态(state)中。然后,React会重新渲染组件,并生成新的虚拟DOM树。在生成新的虚拟DOM树时,React会比较前后两次渲染的虚拟DOM树的差异,并将差异应用到实际的DOM上。

在这个过程中,React会保留表单元素的焦点状态,即使重新渲染后,焦点仍然保持在原来的表单元素上。这是因为React在更新DOM时,会尽量保持DOM节点的稳定性,只更新需要更新的部分,而不会重新创建整个DOM树。因此,即使重新渲染后,表单元素的焦点状态仍然保持不变。

总结起来,React的onChange事件在不丢失焦点的情况下也能正常工作,是因为React使用了虚拟DOM的概念,通过比较前后两次渲染的虚拟DOM树的差异,只对有变化的部分进行实际的DOM操作,从而保持了表单元素的焦点状态。

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

相关·内容

PostgreSQL vacuum 不使用 full 情况下为什么有时回收空间

最近是不知道怎么回事,年底了自己公司,群里都在关于磁盘空间部分,MySQL怼完架构师,PostgreSQL 让我想起曾经有一个资深架构提出一个问题,PostgreSQL 非要使用 vacuum...版本中,运行一下这个命令,然后将PG日志模拟成MySQL genernal log 方式,上面就是我们记录后整体操作,这里蓝色部分是我标记,其中主要功能如下 PG接受到你要进行vacuum...不过说到这里还没有说到主题,就是为什么vacuum 有的时候达到vacuum full功能,运行完毕,磁盘空间释放给操作系统。...释放空间,是的他,但是你说那个 ,你说就差你买一个500万彩票。...下面是vacuum.c 和 freespace.c 两个关于执行vacuum释放空间部分代码。

13110

React源码中如何实现受控组件

React中一个简单受控组件如下: function App() { const [num, updateNum] = React.useState(0); const onChange...如果我们直接修改value,那么属性改变后input光标输入位置丢失,光标会跳到输入框最后。 想想我们将1234修改为12534。...简单说,不同于classNamecommit阶段受控更新,value则完全是非受控形式,只必要时候受控更新。 因为一旦更新value,那么光标位置就会丢失。...这条路径工作流程如下: 先以非受控形式更新表单DOM 以同步优先级开启一次更新 更新后valuecommit阶段并不会像其他props一样作用于DOM 调用restoreStateOfTarget...我们正常受控组件就是相同情况: function App() { const [num, updateNum] = React.useState(0); const onChange

1.4K40

从 0 到 1 实现 react - 9.onChange 事件以及受控组件

该系列文章实现 cpreact 同时理顺 React 框架核心内容 项目地址 从一个疑问点开始 接上一章 HOC 探索 抛出问题 ———— react onChange 事件和原生...DOM 事件中 onchange 表现不一致,举例说明如下: // React onChange 事件 class App extends Component { constructor(props...受控组件实现 题目可以换个问法:当 input 传入属性为 value 时(且没有 onChange 属性),如何禁用用户输入事件同时又能获取焦点?...结合前文 onChange 实现是监听 input 事件,代码分为以下两种情况: 1.dom 节点包含 value 属性、onChange 属性 2.dom 节点包含 value 属性,包含 onChange...属性 时,提供相应回调函数 changeCb 通过事件循环机制改变表单值。

1.8K10

这个 hook api,是 useState 双生兄弟

使用函数创建组件,有一个非常特殊地方。那就是当组件重新刷新时,组件函数会重新执行。于是在这种情况下,如何在函数内部持久化保存一个数据或者状态就变成了一个需要探讨问题。...接下来思考一个问题,默认支持input组件拥有.focus方法,调用该方法,input组件就能够获得焦点。...那如果我们自己要封装一个Input组件,并且希望该Input组件能够拥有.focus和.blur方法,我们应该怎么办? 利用React提供 api forwardRef就能够达到这个目的。...; 我们可以使用同样方式,自定义Input组件。...useImperativeHandle可以让我们使用ref时自定义暴露给父组件实例值。

1.1K20

React Conf 2018 回顾】React 今天和明天 II —— React Hooks 提案

React Team 工作,这是我第一次参加 React 大会。...而且一旦你使用了 class组件,你没有办法造成“包装地狱”情况下,进一步拆分它。事实上,这并不是一个新问题。...但是它还包含了一点点嵌套,而且嵌套问题不只会在使用 context 情况下出现,使用任何一种类型render prop API 都会遇到。 我们使用 hook 实现相同功能。...好,这张幻灯片就是你们可以发推片子。(笑声) 今天我们向你们展示了 Hook 提案。Hook 让我们可以不使用 class 情况下使用 React 众多特性。...Hook 组件内部真正解释了组件是如何工作。我感觉 hook 一直我们视线里面隐藏了四年。事实上,如果看看 React Logo,可以看到电子轨道,而 hook 好像一直就在那里。谢谢。

2.8K30

TDesign 更新周报(2022年8月第1周)

使用 esm 包修改 less token 业务需要注意,组件库中各组件实现圆角做了统一调整,详情参见 #158 ,存在兼容更新。...: 修复异步获取 option 情况下,参数校验导致用户行为异常问题详情见:https://github.com/Tencent/tdesign-vue/releases/tag/0.45.1Vue3...,表尾列显示异常Table: 吸顶线多级表头,左侧边线缺失问题Cascader: 修复异步获取 option 情况下,参数校验导致用户行为异常Popup: 修复 content 为纯英文时无法自动换行...继承问题Tree: 修复更改 data 数据后展开状态丢失问题详情见:https://github.com/Tencent/tdesign-react/releases/tag/0.38.0Miniprogram...发布 0.10.1 Bug Fixessearch: 修复失去焦点后输入内容被隐藏和清除按钮无法使用问题Tabs: 修复传入相同值时仍触发 onChange 问题Popup: 修复使用 overlay

3.5K10

精读《React — 5 Things That Might Surprise You》

异步函数中设置状态时可能出现同样问题: onClick={() => { setTimout(() => { setCounter(counter + 1); ), 1000); }};...中 ref 机制作为访问元素 DOM 节点手段,无论是因为我们需要它来计算其大小、设置焦点状态,或者基本上做任何 React 自然不能做事情。...点击demo ❝函数式组件中我们可以使用ref存储静态变量 ❞ 3. React 可以强制重新挂载一个组件 写入DOM成本非常高。这就是为什么我们通常不想重新mount 组件,除非绝对必要。...那么在那种情况下,我们如何告诉 react 卸载并立即重新mount 组件?用一个简单技巧——为我们组件提供一个key,并改变它值。...context一般用于频繁更新场景比如(locale和theme) ❞ use-context-selector可以解决context带来性能问题 频繁更新状态(状态共享),推荐使用Redux等状态管理工具

1.1K20

不小心找到了快手招聘官网BUG

本来一切都很正常,但是写简历时候猛得发现,快手招聘这简历编辑虽然搭得蛮好看,但是总觉得有些地方漏了啥~ 啊我懂了,原来是快手简历编辑IT技能这里只有HTML5和Web前端两个选项体现我(前端)技能...我第一想法是oninput,但是这同样不可行,并没有注册相关方法 3.2.3 直接调用React方法【成功】 ... 等等,为什么非要原生方法呢?我们能不能直接调React方法?...那么我们调用onChange试试,当然仍然很遗憾,并不行,这里提供方法跑起来,并不能成功赋值给表单 那应该怎么处理?突然我看到了这个眼熟className 这不是AntDesign么?...上并没有我们想要onChange方法,但是我们拿到Selector组件children,而这个children中更是很直接给出了所有的props 在这种情况下,我们调用onChange尝试,因为理论上...这里实战价值是可以脱离React修改某些状态,面对input这种非受控但是被封装组件是有奇效

52430

浅谈 React Refs

本文作者:IMWeb eden 原文出处:IMWeb社区 未经同意,禁止转载 React Refs React组件中,props是父组件与子组件唯一通信方式,但是某些情况下我们需要在props...之外强制修改子组件或DOM元素,这种情况下React提供了Refs解决 哪些场景会用到refs 下面列举几个场景: 对input/video/audio需要控制时,例如输入框焦点、媒体播放状态 直接动画控制...集成第三方库 注意:如果能使用props实现,应该尽量避免使用refs实现 Refs三种方式 字符串模式 :废弃建议使用 回调函数 React.createRef() :React16.3提供...Child上面,并不是App上 回调函数模式 相比 字符串模式 更加灵活,避免了诸多问题 可以优雅组件销毁时回收变量, ref中回调函数会在对应普通组件componentDidMount,ComponentDidUpdate...总结 Refs 字符串模式已经废弃,React 建议使用并且会提示警告,开发中推荐使用React.forwardRef方式,简单优雅,回调函数模式应用在复杂场景中。

97830

97.精读《编写有弹性组件》

以上规则不仅适用于 React,它适用于所有 UI 组件。 不要阻塞渲染数据流 阻塞数据流意思,就是 不要将接收到参数本地化, 或者 使组件完全受控。... Class Component 语法下,由于有生命周期概念,某个生命周期将 props 存储到 state 方式屡见鲜。...发请求就是一种副作用,如果在一个组件内发请求,那么取数参数变化时,最好重新取数。...} /> 另外可以通过 ref 解决,让子元素提供一个 reset 函数,不过推荐使用 ref。...频繁传递回调函数 Function Component 会导致组件粒度拆分比较细,提高可维护性同时,会导致全局 state 成为过去,下面的代码可能让你觉得别扭: const App = memo

50210

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

React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook; React 函数组件中调用 Hook。那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计是基于数组实现。调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...可以是带有一个render()方法类,简单点可以定义为一个函数。这两种情况下,它都把属性props作为输入,把返回一棵元素树作为输出。...Refs 应该谨慎使用,如下场景使用 Refs 比较适合:处理焦点、文本选择或者媒体控制触发必要动画集成第三方 DOM 库Refs 是使用 React.createRef() 方法创建,他通过 ref...这将不会工作

2.6K20

精读《React Hooks 最佳实践》

简介 React 16.8 于 2019.2 正式发布,这是一个提升代码质量和开发效率特性,笔者就抛砖引玉先列出一些实践点,希望得到大家进一步讨论。...用 React.useMemo 优化渲染性能。 用 App.defaultProps 定义 Props 默认值。 FAQ 为什么不用 React.memo?...推荐使用 React.useMemo 而不是 React.memo,因为组件通信时存在 React.useContext 用法,这种用法会使所有用到组件重渲染,只有 React.useMemo 处理这种场景按需渲染...onChange 本不慢,大部分使用值组件不慢,没有必要从 onChange 源头开始就 debounce 。...然而被调用处代码怎么写并不受我们控制,这就导致了规范父元素可能导致 React Hooks 产生死循环。

1.1K10

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

需要使用状态操作组件(无状态组件可以实现新版本react hooks可实现) 总结: 类组件可以维护自身状态变量,即组件 state ,类组件还有不同生命周期方法,可以让开发者能够组件不同阶段...但是⼀定规模项⽬中,上述⽅法很难进⾏异步流管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...它提供了一系列React组件,包括数字格式化、字符串格式化、日期格式化等。 React-intl中,可以配置不同语言包,他工作原理就是根据需要,语言包之间进行切换。...为什么React并不推荐优先考虑使用Context?...与组件上数据无关加载,可以constructor里做,但constructor是做组件state初绐化工作,并不是做加载数据这工作,constructor里不能setState,还有加载时间太长或者出错

2.3K30

快来使用 React-Hook-Form 搭建强大React表单

为了让register正常工作,我们需要为每个输入提供一个适当name属性。例如,对于用户名输入,它名称为“username”。...默认验证只提交表单时执行。 我们可以通过给useForm传递一个对象来改变这一点,我们可以需要执行验证时设置模式:onBlur、onChange或onSubmit。...每当用户'失去焦点'或点击远离输入,onBlur将使验证运行。onChange是用户输入时验证,onSubmit是表单提交时验证。...例如,某些情况下,您希望它在onSubmit中创建一个不同错误或清除一个错误,就可以使用这些方法。...总结 我希望本文向您展示了如何在React应用程序中更容易地创建功能性表单。 还有很多与react-hook形式相关特性我没有在这里介绍。点击这里,官方文档应该涵盖你想到任何用例。

3.5K21

React】学习笔记(一)——React入门、面向组件编程、函数柯里化

为你应用每一个状态设计简洁视图,当数据变动时 React 高效更新并渲染合适组件。 以声明式编写 UI,可以让你代码更加可靠,且方便调试。...' )) script标签type属性必须写text/babel,如果写默认为JavaScript 运行效果 2.2、JSX语法规则 React语法是JSX...类中定义方法局部都开启了严格模式,直接调用不会指向window,所以值为undefined React 不支持直接修改状态属性,就算修改了React 本身不作反馈 this.state. isHot..."/>  } } 组件里标签可以通过ref属性来标识自己,然后都会收集到类实例refs属性中,相当于原生中id,但我们拿去值方式原生中...React中,可变状态通常保存在组件状态属性中,并且只能使用 setState() 进行更新,而呈现表单React组件控制着在后续用户输入时该表单中发生情况,以这种由React控制输入表单元素而改变其值方式

5K30

React受控组件和非受控组件

受控组件用来 React保存该状态,比如同步到渲染输入元素组件、树结构中某个父组件,或者一个 flux store 中。 而这种模式可以被扩展至特定非 DOM 状态相关用例中。...React Inputs 对于 React Inputs,是这样工作: 要创建一个非受控 input,要设置一个 defaultValue 属性。...这种情况下 React 组件会使用底层 DOM 节点并借助节点组件本身 state 管理该 value。...要创建一个受控 input,则要设置 value 和 onChange() 属性。在这种情况下,一旦 value 属性改变,React 总会将该属性赋值给 input 作为它值。...封装 对于使你自己组件同时支持可控/非可控行为这一点上,你应该明白这是简单而很可能有用。希望你清楚理解为什么需要用这种方式构建组件,并且知道如何去做。

2.7K20

92.精读《React PowerPlug 源码》

然而文件粒度并非状态管理最合适粒度,所以有了 Redux 之类全局状态库。 同样,文件粒度并非状态管理最细粒度,更细粒度或许更合适,因此有了 React PowerPlug。...既然 Toggle 功能弱于 Value,为什么不用 Value 替代 Toggle 呢?这是个好问题,如果你担心自己代码可读性的话,的确可以永远不用 Toggle。...实现方式是,组件内部维护一个 Interval 定时器,实现了组件更新、销毁时计时器更新、销毁操作,可以认为这种定时器生命周期绑定了 React 组件生命周期,不用担心销毁和更新问题。...这也是为什么每个函数 value 一般都要重命名原因。 精读《Epitath 源码 - renderProps 新用法》 文章中,笔者就介绍了利用 generator 解决高阶组件嵌套问题。... 精读《React Hooks》 文章中,介绍了 React Hooks 已经实现了这个特性。

1.2K30

react.js 学习笔记

/facebook/react 一、开发环境搭建: 1、官网安装react.js 2、官网安装react-dom.js 3、react.createClass 注册一个组件类 4.ReactDOM.render...( ,document.getElementById('reactContainer') ) 4.巨坑: react中renderreturn为什么要加上括号啊?...) 3.声明周期使用(放逻辑代码方法) 4.render函数里应该是纯粹组件结构,没有任何逻辑代码,不应该修改组件state,不读写DOM信息,不与浏览器交互。...( ) } }); ReactDOM.render(,document.getElementById("demo")) React表单使用: 表单事件响应和bind复用 1.标签里forReact...里面不能正常使用,需要使用htmlFor 2.React表单bind复用 3.可控组件 4.不可控组件 使用onChange方法,用refs获取DOM方法,value默认值要改成defaultValue

1.9K100

React教程:组件,Hooks和性能

然而,有些情况下它们是必要,特别是DOM元素上(例如:用编码方式改变焦点)。附加到 React 组件元素时,你可以自由使用所引用组件中方法。...这就是为什么 React 中会有错误边界。那他们是怎么工作呢? 如果出现问题并且没有错误边界作为其父级,则会导致整个React 应用失败。...首先,常规 CSS/内联样式在这里能够正常应用,你只需 className 属性中添加 CSS 中类名,它就能正常工作。内联样式与常规 HTML 样式略有不同。...IDE(例如WebStorm)具有自动完成功能,告诉你可用名称。...上述步骤会使你应用在没有来自 React 检查和警告情况下运行,并且 bundle 本身将被最小化。 你还可以为 React 应用做更多事。你如何处理构建 JS 文件?

2.6K30
领券