React 受控组件与非受控组件

受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState 来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

1. 我们用 state 的数据作为受控组件的数据源；
2. 对受控组件绑定一个事件来监听它的状态变化并通过 setState 更新 state；
3. 这样的组件在初始化和更新的时候都受 state 来控制；

非受控组件 --- 图片上传，富文本编辑等

在 React 中，表单元素的 value 值将会覆盖 DOM 节点中的值，所以在受控组件中需要监听事件来更新 state。但是在非受控组件中，你可以值设置一个 defaultValue，不去控制后续的变化。

1. 图片上传等组件不能用 value 来控制它的值，只能由用户来设置，所以它只能是一个非受控组件；
2. 非受控组件是一种反模式，它的值不受组件自身的state或props控制；
3. 通常需要为其添加ref prop来访问渲染后的底层DOM元素；