react中受控组件与非受控组件

受控？什么受什么控制？
输入类表单元素的值 受 setState的控制

​ 在HTML中，表单元素（如：input textarea select通常自己维护state,并根据用户输入进行更新。而在react中，可变状态通常保存在组件的state属性中，并且只能通过使用setState()来更新。

1. 受控組件

​ react官网简述：https://zh-hans.reactjs.org/docs/forms.html#controlled-components

• 每当输入框内容发生变化时，都会被写入组件的state中，这种组件在react中别理解为 受控组件。

• 受控组件的值value，始终由react中的state驱动

  具体流程：

  1. 首先通过state设置输入框的默认值
  2. 当输入框的值发生变化时，调用onChange事件处理器
  3. 事件处理器通过合成事件对象 e 拿到改变后的数据，并且更新应用的state
  4. setState触发视图的重新渲染，完成数据的更新展示。

class Login extends React.Component{
    state={
        username:'',
        password:''
    }
    userChange=(e)=>{
        this.setState({username:e.target.value})
    }
    passChange=(e)=>{
        this.setState({password:e.target.value})
    }
    render(){
        return (
        	<input type='text' name="username" onChange={this.userChange}></input>
            <input type='password' name='password' onChange={this.passChange}></input>
        )
    }
}
ReactDOM.render(<Login></Login/>,盒子)

受控组件的缺陷：

​ 通过上面的例子,可以看到输入框的值都是react组件进行管理的，不会出现很乱的情况，但是当我们有多个输入框时，想要同时获取到全部的值就必须每个都要编写事件处理函数，所以这会让我们的代码看着很臃肿，所以为了解决这种情况，出现了非受控组件。

2. 非受控组件

​ 使用ref从DOM节点中获取表单数据，因为非受控组件将真实数据存储在DOM节点中。

react官网简述：https://zh-hans.reactjs.org/docs/uncontrolled-components.html

class Login extends React.Component{
    submitHandle(e)=>{
        e.preventDefault()//阻止默认事件，防止页面刷新
        const {userNode,passNode}=this
        console.log(userNode.value,passNode.value)
    }
    render(){
       
        return (
            {/*表单元素中，点击提交按钮默认执行form标签上的onSubmit事件 并跳转到action指定的地址，刷新页面 不写提交方式，默认是get,参数以问号形式拼接，query传参 */}
        	<form action="url" onSubmit={this.submitHandle}
                <input name='username' type= 'text' ref={node=>this.userNode = node}></input>
                <input name='password' type = 'password' ref={node=>this.passNode=node}></input>
                <button type='submit'>提交</button>
            </form>
          )
    }
}
  {/* ref 获取表单数据，会降低性能，但是react提倡少用ref, */}
                

非受控那个组件的特点：

• 输入框输入的值，实时的存储在了DOM节点中（本来就存在的事实）
• 我们通过ref属性获取该节点DOM的值
• 保存在state中，现用现取

总结：页面中所有输入类的DOM如果是现用现取的称为非受控组件，而通过setState将输入的值维护到了state中，需要时再从state中取出，这里的数据就受到了state的控制，称为受控组件。