一、受控组件
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。 我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
一句话来说就是：受控组件既给值，也提供操作方法，如：
<FInput value={x} onChange={fn}/> 受控组件
二、非受控组件
与受控组件不同，非受控组件只给初始值，不管操作，如：
<FInput defaultValue={x} ref={input}/> 非受控组件
使用 ref 来从 DOM 节点中获取表单数据。
因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码，这会影响代码美观性，但使用非受控组件往往可以减少代码量。
React推荐使用受控组件。
三、二者区别
受控组件的表单数据是由 React 组件来管理的。非受控组件的表单数据将交由 DOM 节点来处理。
也就是说受控组件的状态由开发者维护，非受控组件的状态由组件自身维护（不受开发者控制）。
