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

1.非受控组件

1.在虚拟DOM节点上标识一个ref属性，并且将创建好的引用(dom节点)赋值给这个ref属性
2.react会自动将输入框中输入的值放在实例的ref属性上

// 只是不受组件控制
        // 创造组件
        class Text extends React.Component{
            login(event){
                event.preventDefault() // 组织默认事件
                const {username ,password} = this // 结构赋值
            } 
            render(){
                 const element = (
                    <div id={"from"}>
                        <div>
                            用户名: <input type="text" name="username" ref={c => this.username = c} />
                        </div>
                        <div>
                            密码: <input type="text" name="password" ref={c => this.password = c} />
                        </div>
                        <div>
                            <input type="button" value="登录" />
                        </div>
                    </div>
                 )
                 return element
            }
        }
 ReactDOM.render(<Text></Text>,document.getElementById('root'))

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

2.受控组件

1.表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
2.受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
3.受控组件只有继承React.Component才会有状态.
4.受控组件必须要在表单上使用onChange事件来绑定对应的事件.

  // 通过 onChange 事件，边输入边通过 setState 修改状态
        /*
            当想要获取表单的一些内部状态时,就可以将表单的内部状态和组件的状态进行绑定 这样就形成了受控组件
            受控组件: 当我们想要 组件state状态机 和 表单空间的 state 一致时，就可以使用 受控组件，
            当我们想要给表单，设置value属性或者checked时，React 就会认为我们要实现一个受控组件，这时必须给控件加 onChange 处理 onChange 再把 控件的状态同步给组件
            非受控组件: 我们不需要同步 value 值 ，使用：(defaultValue,defaultChecked)
        */
        class Text extends React.Component{
            constructor(props){
                super(props) // 实例化组件
                this.state = {}
            }
            saveDate = (dataType,event) => {
                this.setState({[dataType]:event.target.value})
            }
            login = (event) => {
                event.preventDefault() // 阻止表单提交
            }
            render(){
                return (
                    <div>
                        <form onSubmit={this.login}>
                            用户名:<input type="text" placeholder="你输入账号" name='username' onChange={event => this.saveDate('username',event)}/>
                            密码:<input type="text" placeholder="请输入密码" name='password' onChange={event => this.saveDate('password',event)}/>
                            <br/>
                            <input type="submit" value='登录'/>    
                        </form>
                        <h1>用户名：{this.state.username ? this.state.username : '暂无用户'} </h1>
                        <h1>密码： {this.state.password ? this.state.password : '空'}</h1>
                    </div>
                ) 
            }
        }
        ReactDOM.render(<Text></Text>,document.getElementById('root'))

3、对比受控组件和非受控组件的输入流程：

1.非受控组件： 用户输入的内容 => input 中显示用户输入的内容
2,受控组件： 用户输入的内容 => 触发onChange事件 => 设置 state状态username/password = 的内容 => 渲染input使他的value变成用户输入的内容