React中受控组件和非受控组件

2024-05-21 15:52:22

受控组件

在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。受控组件中，组件渲染的状态与它的value或者checked相对应。React通过这种方式消除了组件的局部状态。React官方推荐使用受控组件。

受控组件更新state流程：

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

非受控组件

简单的说，如果一个表单组件没有value props（单选按钮和复选框对应的是checked props）就可以称为非受控组件。这样，我们可以使用defaultValue和defaultChecked来表示组件的默认状态。

在React中，非受控组件是一种反模式，它的值不受组件自身的state或者props控制，通常需要为其添加ref prop来访问渲染后的底层DOM元素。

对比受控组件和非受控组件

我们刚看到通过defaultValue或者defaultChecked来设置表单的默认值，它仅会被渲染一次，在后续的渲染时并不起作用。

<inputvalue={this.state.value}onChange={(e) => this.setState({value: e.target.value})}
><input defaultValue={this.state.value}onChange={e => {this.setState({value: e.target.value})}}
>

在受控组件中，可以将用书输入的内容输出展示，而在非受控组件中，如果不绑定onChange事件，我们在文本框中输入任何内容都不会展示。可以看到受控组件和非受控组件的最大区别就是，非受控组件状态并不会受应用状态的控制，应用中也多了局部组件状态，而受控组件的值来源于state。

性能上问题

在受控组件中，每次表单的值发生变化都会调用一次onChange时间处理器，这会有一些性能消耗，任然不提倡在React中使用受控组件，这个问题可以通过redux应用架构来达到状态统一。

React中受控组件和非受控组件相关推荐

react中受控组件与非受控组件
受控?什么受什么控制? 输入类表单元素的值受 setState的控制在HTML中,表单元素(如:input textarea select通常自己维护state,并根据用户输入进行更新.而在r ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
React的受控组件和非受控组件
一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...
【React】知识点归纳：受控组件与非受控组件区别
React: 受控组件与非受控组件区别受控组件示范代码: 原理图: 非受控组件示范代码: 结论受控组件在HTML中,标签<input>.<textarea>.< ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
react——非受控组件和非受控组件的应用
非受控组件和非受控组件的应用什么是非受控组件: 非受控组件:它应用的次数没有受控组件多,在工作中,多数使用为受控组件非受控组件:表单项中的value或checked值,它不受state中的属性控制 ...
React 受控组件和非受控组件（总结）
React 受控组件和非受控组件文章目录 React 受控组件和非受控组件受控组件非受控组件拓展:什么是***event*.target** 受控组件在React中,可变的状态通常保存在组件 ...
react受控组件与非受控组件
react受控组件与非受控组件区别在于: 受控组件中输入框的值由其change事件接管,做对应的数据劫持操作,例如可以对输入框的值进行合法输入校验(匹配正则),此时表单数据由 React 组件来管理( ...

最新文章

热门文章