7.受控、非受控组件

React的受控组件与非受控组件的概念是相对于表单而言的，在React中表单元素通常会持有一下内部的state，因此它的工作方式与其他HTML元素不一样，而获取表单元素内部state的实现方式的不同，就产生了受控组件和非受控组件。

表单：

受控表单：表单控件中的值都由state对象来管理，state对象中存储的值和表单控件中的值是同步状态的。

非受控表单：表单控件的值由DOM元素本身管理

受控组件

• 每当表单的状态发生变化时，都会被写入到组件的state中。
• 在受控组件中，组件渲染出的状态与它的value或checked prop相对应。【受父组件（外部状态）、自身的状态控制】
• react受控组件更新state的流程: 通过在初始state中设置表单的默认值。
  每当表单的值发生变化时，调用onChange事件处理器。
  事件处理器通过合成对象event拿到改变后的状态，并更新应用的state。
  SetState触发视图的重新渲染，完成表单组件值的更新。

非受控组件

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