React受控组件和非受控组件的区别

目录

一、受控组件

二、非受控组件

总结

---

一、受控组件

在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 进行更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为受控组件。

比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state

 代码如下（示例）：

class Login extends React.Component{
 
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}
 
			//保存用户名到状态中
			saveUsername = (event)=>{
				console.log(this);
				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>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))

受控组件更新state的流程
1、 可以通过初始state中设置表单的默认值
2、每当表单的值发生变化时，调用onChange事件处理器
3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state
4、一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

二、非受控组件

非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。
在非受控组件中，可以使用一个ref来从DOM获得表单值。

代码如下（示例）：

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>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Login/>,document.getElementById('test'))

 非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

总结

受控组件和非受控组件的根本区别就是受控组件受到restate状态控制可以通过setState进行更新，而非受控组件不受state控制，通过自身DOM改变数据，没有虚拟DOM。