一：受控组件

1：定义：

在使用表单来收集用户输入时，当表单的状态发生变化，就会触发onChange事件，更新组件的state。

组件渲染出的状态与它的value或checked属性相对应，使整个状态可控

2：更新流程：

可以通过初始state中设置表单的默认值

每当表单的值发生变化时，调用onChange事件处理器

事件处理器通过事件对象e拿到改变后的状态，并更新组件的state

一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

3：缺陷：

表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都要编写事件处理函数，会让代臃肿

4：代码：

class Control extends React.Component {
 
    state = {
        username: "zf",
        pwd: "123"
    }

   
    handleChange = (e) => {
      
        let name = e.target.name;
       
        this.setState({
            [name]: e.target.value
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.username}</p>
                用户名：<input
                    name="username"
                    type="text"
                    value={this.state.username}
                    onChange={this.handleChange} /> <br />

                <p>{this.state.pwd}</p>
                密码：<input
                    name="pwd"
                    type="text"
                    value={this.state.pwd}
                    onChange={this.handleChange} /> <br />
            </div>
        )
    }
}

二：非受控组件

1：定义：

如果一个表单组件没有value props（单选和复选按钮对应的是checked props）时，

不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据

2：更新流程

3：缺陷

4：代码

handleSubmit = (e) => {
    // 阻止原生默认事件的触发
    e.preventDefault();
    console.log(this.username.value);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
          
            用户名<input
                name="username"
                type="text"
                ref={username=>this.username=username}
            /><br />
        </form>
    )
}

三：总结

1：页面中所有输入类的DOM如果是现用现取的称为非受控组件

2：通过setState将输入的值维护到了state中，需要时再从state中取出，这里的数据就受到了state的控制，称为受控组件