本文我们将和大家分享react中受控组件和非受控组件实例详解，在详解之前我们会简单介绍一下什么是受控组件和非受控组件，希望能帮助到大家。受控组件在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来设置表单的默认值，它仅会被渲染一次，在后续的渲染时并不起作用。
<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中受控组件和非受控组件实例详解的详细内容。