说说对 React 受控组件和非受控组件的理解，以及应用场景?

前言

1. 受控组件和非受控组件指的是 表单元素，如

<input>、<textarea>、<slect>

2. 只要牵扯到事件记住 两个箭头 就不会出错：
   • 事件创建者 在声明事件时用箭头函数。
   • 事件调用者 在调用时外层包裹箭头函数。

受控组件

1. 表单组件的状态/数据只能由 React 的 state 维护，修改只能通过 setState()。
2. 表单数据是由 React 来管理。
3. 简单讲就是受控制的组件的状态全程响应外部数据。

class TestCompomponent extends React.Compoment {
    constructor(props) {
        super(props);
        this.state = {
            username: "NanXing"
        }
    }
    render() {
        return <input name = "username" value = {
            this.state.username
        } />;
    }
}

以上代码在输入内容时，会发现输入的内容并无法显示，就是说 input 只是可读的状态。这是因为 value 被 state.username 所控制住。当用户输入新的内容时，this.state.username 并不会自动更新，这样的话 input 内容也就不会改变。如果想结果被控制，可以在 input 标签设置 onChange 事件，输入时就触发此事件函数，从而导致 input 框的内容发生改变。因此，受控组件一般需要初始化状态和一个状态更新事件函数。

非受控组件

1. 使用 ref 从 DOM 节点中获取表单数据，不能进行统一管理，所以不可控。
2. 表单数据将交由 DOM 节点处理。
3. 简单讲是不受控制组件一般情况是在初始化时接受外部数据，然后自己在内部存储其自身状态，当需要时，可以使用 ref 查询 DOM 并查找其当前值。

如下代码：

import React， {Component} from "react";

export class UnControl extends Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
    handleSubmit(e)=> {
        console.log(`我们可以获得input内的值：${this.inputRef}`);
        e.preventDefault();
    }
    render(){
        return (
        <form onSubmit ={ e=>this.handSubmit(e)}>}>
            <input defaultValue="NanXing" ref={this.input.val}/>
            <input type="submit" value="提交"/>
        </form>    
        )
    }
    
}

应用场景

大部分推荐使用受控组件来实现表单，因为在受控组件中，表单数据由 React 组件负责处理。如果选择非受控组件的话，控制能力较弱，但更加方便快捷，代码量少（表单数据由 DOM 本身处理）。

特征	非受控组件	受控组件
一次性取值(例如，提交时)	是	是
提交时验证	是	是
即时现场验证	否	是
有条件地禁用提交按钮	否	是
强制输入格式	否	是
一个数据的多个输入	否	是
动态输入	否	是