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

React为虚拟DOM输入触发onChange事件的方式与常规DOM中的输入不同。为什么会这样呢?

React为虚拟DOM输入触发onChange事件的方式与常规DOM中的输入不同的原因是,React采用了一种称为"受控组件"的方式来处理表单输入。在React中,表单元素的值由React的状态(state)来控制,而不是直接由DOM元素的值决定。

这种方式的优势在于,React可以将表单的状态与组件的状态进行绑定,使得表单的值与组件的状态保持同步。当用户输入时,React会更新组件的状态,并重新渲染虚拟DOM。然后,React会比较新旧虚拟DOM的差异,并只更新需要更新的部分到真实的DOM中。这种优化可以提高性能,减少不必要的DOM操作。

具体来说,当用户在虚拟DOM中的表单元素输入时,React会调用onChange事件处理函数,并将用户输入的值作为参数传递给该函数。开发者可以在onChange事件处理函数中更新组件的状态,从而实现对表单输入的控制和处理。

对于常规DOM中的输入,用户输入的值直接反映在DOM元素的value属性上,而不会触发特定的事件。开发者需要通过监听input事件或者使用其他方式来获取用户输入的值,并进行相应的处理。

总结起来,React为虚拟DOM输入触发onChange事件的方式与常规DOM中的输入不同,是因为React采用了受控组件的方式来处理表单输入,将表单的值与组件的状态进行绑定,实现了更高效的更新和渲染机制。

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

相关·内容

React 进阶 - 事件系统

比如: 给元素绑定事件,不是真正事件处理函数 在冒泡 / 捕获阶段绑定事件,也不是在冒泡 / 捕获阶段执行事件处理函数拿到事件源 e ,也不是真正事件源 e React 为什么要写出一套自己事件系统...,就会绑定 click 事件 如发现 onChange 事件绑定 [blur,change ,focus ,keydown,keyup] 多个事件 React 事件合成 React 应用,元素绑定事件并不是原生事件...,那么在 React 系统,整个流程会是这样: 批量更新 dispatchEvent 执行会传入真实事件源 button 元素本身。...如果事件是不冒泡,那么执行一次,listenToNativeEvent,第二个参数 true 。...如果是常规事件,那么执行两次 listenToNativeEvent,分别在冒泡和捕获阶段绑定事件

1.1K10

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

p=2&spm_id_from=pageDriver 目录 一、React 概述 1.1、React 开发背景 1.2、模块组件、声明式组件化 1.3、虚拟DOM真实DOM 二、React 入门...在React Native可以使用React语法进行移动端开发。使用虚拟DOM+优秀Diffing算法,尽量减少真实DOM交互。...而React 怎么做,当数据发生变化时,将真实DOM生成对应虚拟DOM,但并不会将原来虚拟DOM丢弃,它会进行虚拟DOM比较,如果一样的话就不会给他生成真实DOM,同样100条数据,发生变化了...在React,可变状态通常保存在组件状态属性,并且只能使用 setState() 进行更新,而呈现表单React组件也控制着在后续用户输入时该表单中发生情况,以这种由React控制输入表单元素而改变其值方式...比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件state。

5K30
  • 前端二面高频react面试题集锦_2023-02-23

    diff 虚拟DOM 比较规则 【旧虚拟DOM 【新虚拟DOM相同key 若虚拟DOM内容没有发生改变,直接使用旧虚拟DOM虚拟DOM内容发生改变了,则生成新真实DOM...,随后替换页面之前真实DOM 【旧虚拟DOM未找到 【新虚拟DOM】相同key 根据数据创建真实DOM,随后渲染到页面 React-Router 4怎样在路由变化时重新渲染同一个组件...区别: 对于事件名称命名方式,原生事件全小写,react 事件采用小驼峰; 对于事件函数处理语法,原生事件字符串,react 事件函数; react 事件不能采用 return false 方式来阻止浏览器默认行为...** React Vue diff 算法有何不同? diff 算法是指生成更新补丁方式,主要应用于虚拟 DOM 树变化后,更新真实 DOM。...此时触发虚拟 DOM 树变更遍历,采用了深度优先遍历算法。但传统遍历方式,效率较低。为了优化效率,使用了分治方式

    2.8K20

    【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

    这些综合事件具有您惯用本机事件相同界面,除了它们在所有浏览器工作方式相同. React实际上并未将事件附加到子节点本身。...原生 DOM 渲染:React 只会在虚拟DOM修改真实DOM节点,而且修改次数非常少——这是很棒React特性,它优化了真实DOM变化,使React变得更快。...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state。...它们将不同浏览器行为合并到一个API这样做是为了确保事件不同浏览器之间显示一致属性。...32、 React工作原理 React 创建一个虚拟 DOM(virtual DOM)。

    7.6K10

    滴滴前端二面react面试题总结

    和解最终目标是,根据这个新状态以最有效方式更新DOM。为此, React将构建一个新 React虚拟DOM树(可以将其视为页面DOM元素对象表示方式)。...一旦有了这个DOM树,为了弄清DOM是如何响应新状态而改变React会将这个新树上一个虚拟DOM树比较。...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...vue 和 react 都是这样图片这套 dsl 怎么设计?前端领域大家熟悉描述 dom 方式是 html,最好方式自然是也设计成那样。...而 vue 是通过对状态做代理,get 时候收集以来,然后修改状态时候就可以触发对应组件 render 了。有的同学可能问,为什么 react 不直接渲染对应组件

    1K40

    React进阶」一文吃透react事件原理

    3 为什么我们事件手动绑定this(不是箭头函数情况) 4 为什么不能用 return false来阻止事件默认行为? 5 react怎么通过dom元素,找到之对应 fiber对象?...②真实domclick事件被单独处理,已经被react底层替换成空函数。 ③我们在react绑定事件,比如onChange,在document上,可能有多个事件之对应。....]; ③registrationNameModules registrationNameModules记录了React合成事件-对应事件插件关系,在React,处理props事件时候,根据不同事件名称...)处理函数extractEvents,比如我们demo点击事件 onClick 最终走就是 SimpleEventPlugin extractEvents 函数,那么React为什么这么做...②然后执行事件对应处理插件extractEvents,合成事件源对象,每次React事件源开始,从上遍历类型 hostComponent即 dom类型fiber,判断props是否有当前事件比如

    2.6K31

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

    setState是React事件处理函数中和请求回调函数触发UI更新主要方法。...React 将 render 函数返回虚拟 DOM进行比较,从而确定 DOM 要不要更新、怎么更新。...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...受控组件更新state流程:可以通过初始state设置表单默认值每当表单值发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后状态,并更新组件state一旦通过setState...而不是每个状态更新编写一个事件处理程序。React官方解释:要编写一个非受控组件,而不是每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。

    1.2K20

    前端常见react面试题合集_2023-03-15

    参考 前端进阶面试题详细解答为什么虚拟dom提高性能虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要dom操作,从而提高性能具体实现步骤如下用 JavaScript...DOM,但在首次渲染上,虚拟DOM多了一层计算,消耗一些性能,所以有可能会比html渲染要慢注意,虚拟DOM实际上是给我们找了一条最短,最近路径,并不是说比DOM操作更快,而是路径最简单React...函数执行,主要原因有下React 下一代调和算法 Fiber 会通过开始或停止渲染方式优化应用性能,其影响到 componentWillMount 触发次数。...这样方式不仅仅减少了内存消耗,还能在组件挂在销毁时统一订阅和移除事件。...JSX 上写事件并没有绑定在对应真实 DOM 上,而是通过事件代理方式,将所有的事件都统一绑定在了 document 上。这样方式不仅减少了内存消耗,还能在组件挂载销毁时统一订阅和移除事件

    2.5K30

    一天梳理完react面试题

    区别:对于事件名称命名方式,原生事件全小写,react 事件采用小驼峰;对于事件函数处理语法,原生事件字符串,react 事件函数;react 事件不能采用 return false 方式来阻止浏览器默认行为...事件执行顺序原生事件先执行,合成事件后执行,合成事件冒泡绑定到 document 上,所以尽量避免原生事件合成事件混用,如果原生事件阻止冒泡,可能导致合成事件不执行,因为需要冒泡到document...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...虚拟 DOM 引入直接操作原生 DOM 相比,哪一个效率更高,为什么虚拟DOM相对原生DOM不一定是效率更高,如果只修改一个按钮文案,那么虚拟 DOM 操作无论如何都不可能比真实 DOM 操作更快...这样做, React知道发生的确切变化,并且通过了解发生变化后,在绝对必要情况下进行更新DOM,即可将因操作DOM而占用空间最小化。setState 是同步异步?为什么?实现原理?

    5.5K30

    20道高频React面试题(附答案)

    该函数接收输入实际 DOM 元素,然后将其放在实例上,这样就可以在 handleSubmit 函数内部访问它。...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数调用 Hook;在 React 函数组件调用 Hook。那为什么会有这样限制?...将页面的状态抽象JS对象形式,配合不同渲染工具,使跨平台渲染成为可能。...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部值就必须每个都要编写事件处理函数

    1.8K10

    彻底搞懂 React 18 并发机制原理

    但是有个问题,比如用户在 input 输入内容时候,会通过 setState 设置到状态里,触发重新渲染。...但如果这个渲染流程处理 fiber 节点比较多,渲染一次就比较慢,这时候用户输入内容可能就不能及时渲染出来,用户就会感觉卡,体验不好。 怎么解决这个问题?...并不是,react 是通过二机制方式来保存不同优先级这样设计好处,自然是可以用二进制运算快速得到是哪种优先级了: 比如按位、按位或等: 这样性能更好一点,位运算性能肯定是最高。...不过不好地方是看这样代码绕一点。 那为啥就 Lane ?...那 react 通过 Scheduler 调度任务时候,优先级是怎么转? 先把 Lane 转换为事件优先级,然后再转为 Scheduler 优先级。 为什么

    1.3K40

    前端工程师20道react面试题自检

    key可以帮助 React跟踪循环创建列表虚拟DOM元素,了解哪些元素已更改、添加或删除。每个绑定key虚拟DOM元素,在兄弟元素之间都是独一无二。...在 React和解过程,比较新虛拟DOM上一个虛拟DOM树之间差异,并映射到页面。...如果没有key,Rεat就不知道列表虚拟DOM元素页面哪个元素相对应。所以在创建列表时候,不要忽略key。...在 React组件是一个函数或一个类,它可以接受输入并返回一个元素。注意:工作,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...那么diff算法是怎么运作,首先,diff针对类型不同节点,直接判定原来节点需要卸载并且用新节点来装载卸载节点位置;针对于节点类型相同节点,会对比这个节点所有属性,如果节点所有属性相同

    89840

    React源码如何实现受控组件

    我们知道React内部运行有3个阶段: schedule 调度更新阶段 render 进行diff算法阶段 commit 进行DOM操作阶段 假设我们要在onChange触发更新改变className...这样逻辑非常通顺。那么事实上? 直接改变value问题 className只是inputDOM上一个普通属性。而value则涉及到输入框光标的位置。...只不过这个删除过程是同步所以看起来输入框内始终只有1。 ? 所以,不同React其他组件props更新会经历schedule - render - commit流程。...方法,比较DOM实际value(即步骤1非受控value)步骤3更新value,如果相同则退出,如果不同则用步骤3value更新DOM 什么情况下这2个value相同?...}/> ) } 什么情况下这2个value不同

    1.5K40

    React.js 概念入门

    React工作方式,不是根据真实的人从头再建,它只改变对象脸和胳膊。这意味着,如果你在文本框输入文字,这时渲染操作开始,即使文本框父节点没有做更新准备,文本本身知道如何操作。...由于React使用虚拟DOM,这也就产生了另一种有趣可能。我们可以在服务端渲染虚拟DOM,快速更新React视图。...虽然这个开始方式很容易,在创建实际项目的时候,一般使用Browserify或者Webpack来将部件放置到不同文件。...为了Javascript保留关键字区别,对于一些常规html标记,在JSXclassclassName,forhtmlFor。...(Events) React事件作为属性绑定到部件上,可以触发方法。

    2.1K20

    React18新特性」深入浅出用户体验大师—transition

    前面说了 React 18 确定了不同优先级更新任务,为什么会有不同优先级任务。...那么如果 input 搜索过程中用户更优先希望输入状态改变,那么正常情况下,在 input 绑定 onChange 事件用来触发上述两种类更新。...这样在真实情景效果如何?我们来测试一下。 2 模拟场景 接下来我们模拟一下上述场景。流程大致是这样: 有一个搜索框和一个 10000 条数据列表,列表每一项有相同文案。...3 为什么不是 setTimeout 上述问题能够把 setSearchQuery 更新包装在 setTimeout 内部,像如下这样。...在 mountTransition 执行过程触发两次 setPending ,一次在 transition = 1 之前,一次在之后。

    1.8K10

    美团前端一面必会react面试题4

    (1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单状态发生变化,就会触发onChange事件,更新组件state...进行判断react 虚拟dom是怎么实现图片首先说说为什么要使用Virturl DOM,因为操作真实DOM耗费性能代价太高,所以react内部使用js实现了一套dom结构,在每次操作在和真实dom...React 将 render 函数返回虚拟 DOM进行比较,从而确定 DOM 要不要更新、怎么更新。...用法useEffect类似,只是区别于执行时间点不同useEffect属于异步执行,并不会等待 DOM 真正渲染后执行,而useLayoutEffect则会真正渲染后才触发;可以获取更新后 state...这样 React在更新DOM时就不需要考虑如何处理附着在DOM事件监听器,最终达到优化性能目的。说说 React组件开发关于作用域常见问题。

    3K30

    React受控组件和非受控组件

    React,可变状态通常保存在组件状态属性,并且只能使用 setState() 进行更新,而呈现表单React组件也控制着在后续用户输入时该表单中发生情况,以这种由React控制输入表单元素而改变其值方式...比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件state。...2、每当表单值发生变化时,调用onChange事件处理器 3、事件处理器通过事件对象event拿到改变后状态,并更新组件state 4、一旦通过setState方法更新state,就会触发视图重新渲染...即不受setState()控制,传统HTML表单输入相似,input输入值即显示最新值。 在非受控组件,可以使用一个ref来从DOM获得表单值。...onChange事件来绑定对应事件 2、非受控组件 非受控组件不受状态控制 非受控组件获取数据就是相当于操作DOM 非受控组件可以很容易和第三方组件结合,更容易同时集成 React 和非 React

    3.7K10

    react 学习笔记

    Reconciler 协调器 协调器作用是调用函数组件、或 class 组件 render 方法,将返回 JSX 转化为虚拟 DOM 首先将虚拟 DOM 和上次更新时虚拟 DOM 对比,通过对比找出本次更新变化虚拟...React Fiber 支持任务不同优先级,可中断恢复,并且恢复后可以复用之前中间状态。 其中每个任务更新单元 React Element 对应 Fiber 节点。...在React15及以前,Reconciler采用递归方式创建虚拟DOM,递归过程是不能中断。 如果组件树层级很深,递归会占用线程很多时间,造成卡顿。...React16将递归无法中断更新重构异步可中断更新,由于曾经用于递归虚拟DOM数据结构已经无法满足需要。 于是,全新 Fiber 架构应运而生。...受控组件必须要在表单上使用onChange事件来绑定对应事件. React 最棒部分之一是引导我们思考如何构建一个应用。

    1.3K20

    react20道高频面试题答案总结

    类组件函数组件有什么异同?相同点: 组件是 React 可复用最小代码片段,它们返回要在页面渲染 React 元素。...映射真实 DOM 操作是这样React 创建一个 div 节点。...JSX 上写事件并没有绑定在对应真实 DOM 上,而是通过事件代理方式,将所有的事件都统一绑定在了 document 上。这样方式不仅减少了内存消耗,还能在组件挂载销毁时统一订阅和移除事件。...区别:对于事件名称命名方式,原生事件全小写,react 事件采用小驼峰;对于事件函数处理语法,原生事件字符串,react 事件函数;react 事件不能采用 return false 方式来阻止浏览器默认行为...事件执行顺序原生事件先执行,合成事件后执行,合成事件冒泡绑定到 document 上,所以尽量避免原生事件合成事件混用,如果原生事件阻止冒泡,可能导致合成事件不执行,因为需要冒泡到document

    3.1K10
    领券