受控组件与非受控组件

受控组件

1、每当表单的状态发生变化时，都会被写入到组件的state中
2、在受控组件中，组件渲染出的状态与它的value或checked prop相对应
3、react受控组件更新state的流程

<1> 通过在初始state中设置表单的默认值
<2> 每当表单的值发生变化时，调用onChange事件处理器
<3> 事件处理器通过合成对象e拿到改变后的状态，并更新应用的state
<4> SetState触发视图的重新渲染，完成表单组件值的更新

示例如下：

受控组件-input

页面展示

4、使用受控组件需要为每一个组件绑定一个change事件,并且定义一个事件处理器来同步表单值和组件的状态,某些情况可以使用一个事件处理器来处理多个表单域

示例

页面展示

5、在受控组件上指定 value 的 prop 可以防止用户更改输入。(如果指定了 value，但输入仍可编辑，则可能是意外地将value 设置为 undefined 或 null)

非受控组件

1、如果一个表单组件没有value prop就可以称为非受控组件
2、非受控组件是一种反模式，它的值不受组件自身的state或props控制
3、通常需要为其添加ref prop来访问渲染后的底层DOM元素

示例