欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

React中受控组件和非受控组件实例详解

程序员文章站 2022-05-23 14:26:01
...

本文我们将和大家分享React中受控组件和非受控组件实例详解,在详解之前我们会简单介绍一下什么是受控组件和非受控组件,希望能帮助到大家。

受控组件

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

受控组件更新state流程:

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

非受控组件

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

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

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

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

<input
    value={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组件的生命周期函数是什么

构建React组件最全方法

以上就是React中受控组件和非受控组件实例详解的详细内容,更多请关注其它相关文章!