React3——受控组件,React Fragments,ref,context

受控组件

类似于vue的v-model
通过受控组件， 可以跟踪监听用户操作表单时的数据，从而更新容器组件的 state ，再单向渲染表单元素 UI。如果不使用受控组件，在用户实时操作表单时，比如在输入框输入文本时，不会同步到容器组件的 state。

理解

受控组件的理解：

html中的 <input> 、<textarea>、<select>的值的改变通常是根据用户输入进行更新,在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”,这样有点类似于vue里的v-model

常见的受控组件有： <input>的type是text, checkbox,radio时 、<textarea>、<select>

非受控组件：

表单数据由DOM本身处理。即不受setState()的控制

常见的非受控组件有：<input>的type是file时

受控组件具体使用

class MyForm extends React.Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
          name: ''
        };
      // 如果不采用该事件绑定的方法的话，可以试着在render函数中调用方法handleChange时进行绑定 或者 把handleChange方法改为箭头函数的形式
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
   
        this.setState({
    name: e.target.value });
    };

    render() {
   
      let {
    name }