11-17 10:37 阅读 236

关注

React 非受控组件和受控组件(react受控组件和非受控组件区别)

React 非受控组件和受控组件

在React中组件可以分为非受控组件和受控组件。这里的受控主要是指组件的状态是否受到React的控制。
在HTML元素中，<input> , <textarea> , 和 <select> 这类表单元素会维持并保存自身状态在value属性中，并根据用户输入进行更新。在React中，可变的状态通常保存在组件的状态属性state中，并且只能用 setState() 方法来进行更新。
可能这样说还不是特别清楚，我们可以举一个具体的例子来说明，这是一个表单提交的例子。

一、非受控组件和受控组件

1.非受控组件

class Login extends React.Component { handleSubmit = (event) => { event.preventDefault() //阻止表单提交 const { username, password } = this alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`) } render() { return ( <form onSubmit={this.handleSubmit}> 用户名：<input ref={c => this.username = c} type="text" name="username" /> 密码：<input ref={c => this.password = c} type="password" name="password" /> <button>登录</button> </form> ) } } 复制代码

通过实例可发现，在非受控组件中

1. React本身并没有维护组件的状态（input元素的value值）

2. 在需要获取值的时候，先通过ref获取组件（元素），再通过组件（元素）来获取相应的值。

3. 整个过程体现的是一个随取随用。

2. 受控组件

class Login extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存用户名到状态中 saveUsername = (event)=>{ this.setState({username:event.target.value}) } //保存密码到状态中 savePassword = (event)=>{ this.setState({password:event.target.value}) } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是：${username},你输入的密码是：${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名：<input onChange={this.saveUsername} type="text" name="username"/> 密码：<input onChange={this.savePassword} type="password" name="password"/> <button>登录</button> </form> ) } } 复制代码

通过实例可发现，在受控组件中

1. React通过state属性来维护组件的状态，input属性的值会维护到state属性中。

2. 因为组件的状态已经维护到state属性中，所以在获取相应数据的时候直接从state中读取就可以了，不必再获取对应的组件（元素）。

3. 整个过程体现的是一个组件状态的维护和读取。

选择

非受控组件和受控组件都各有其优劣，需要具体情况据分析。相对来说，非受控组件实现比较简单，但比较依赖于ref,受控组件可以更好地维护数据流，但是实现比较复杂。在复杂的表单校验的场景中，受控组件的灵活性会好一点。

表格来源于文章：【React】知识点归纳：受控组件与非受控组件区别

作者：Happyileaf
链接：https://juejin.cn/post/7031111613872603173