怎么理解React中受控组件和非受控组件

受控组件

在HTML表单元素中，输入类。DOM，与用户的输入，通过。 onChange 事件和 setState ，维护数据 state 在需要时，从 state 在其中获取数据的组件称为受控组件。

官方推荐表尽可能多地使用受控组件。

受控组件相似 Vue 双向结合在生物信息学中的作用

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)=>{
        // 通过state获取数据
        const {username,password} = this.state
        alert(您输入的用户名为：${username},您输入的密码为：${password})
    }
    render(){
        return(
            

                用户名：
                密码：
                登录
            
        )
    }
}

不受控制的部件

与受控组件相反，如果您只想获取表单元素的值，而不关心它如何更改，则可以获取它。 DOM 节点来取值，通常使用 ref ，这不依赖于 state ，现用现取的组件被称为不受控制的部件。

class Login extends React.Component{
    handleSubmit = (event)=>{
        // 通过ref拿到数据，现在就拿走。
        const {username,password} = this
        alert(您输入的用户名为：${username.value},您输入的密码为：${password.value})
    }
    render(){
        return(
            

                用户名： this.username = c} type="text" name="username"/>
                密码： this.password = c} type="password" name="password"/>
                登录
            
        )
    }
}