受控组件与非受控组件

受控组件这个概念一般用于表单；区别受控组件与非受控组件很简单，简单来说，就是是否使用react来管理表单的值。

受控组件

表单一个元素的value或者其他属性与React的state绑定，表单元素的改变会引起state的改变，并且进行重新的值绑定。

react受控组件更新state的流程

• 通过state设置表单的默认值
• 表单值发生改变时，调用onChange事件
• 通过合成事件对象e拿到改变的状态，并且应用state
• setState触发视图的重新渲染，完成表单组件值的更新

使用受控组件的好处，在onChange事件中进行数据清洗和校验

非受控组件

没有通过state去绑定value,表单元素的状态依然由表单元素自己管理。

非受控组件中设置默认值时，react无法控制表单元素的value属性。所以，我们可以通过defaultValue和defaultChecked prop来表示组件的默认状态。

<input ref="name" type="text" defaultValue="shanghai">

受控组件还是非受控组件

参考:

• 非受控组件 – React

• Controlled and uncontrolled form inputs in React don't have to be complicated - Gosha Arinich

最后总结为一句话，不到非常境地不使用非受控组件