前情提要：

HTML 表單元素天生就存在一些內部狀態，比如 input、textarea 和 select 這些標簽，它們會維持自己的內部狀態，并且根據用戶的輸入去進行更新。但是在 React 中，這些可變狀態一般保持在 state 中，然后通過 this.setState() 方法去進行更新。

你必須要知道：

因為 React 默認是單向數據流的處理方式。也就是說，我們可以動態綁定輸入框的值在 state （組件的狀態）當中，當數據發生改變時，我們必須手動監聽輸入框的 onChange 事件，在事件處理函數中手動通過 this.setState() 方法驅動視圖的更新。【因為不存在指令的概念，所以 React 只支持數據的單向流動（綁定），不同于 Vue 的 v-model 指令可以自動實現表單數據的雙向綁定。這個一定要清楚?！?/p>

注意：有時使用受控組件可能會非常繁瑣，因為你要為數據可能發生的變化，對于每一種變化方式都要編寫一個事件處理程序，并且通過一個組件來管理全部的狀態。當將已經有的代碼庫轉化為 React，或者將 React 應用程序與非 React 庫集成的時候，這可能變得非常煩人。

應用場景：

由于非受控組件將真實數據保存在 DOM 中，因此在使用非受控組件時，更容易同時集成 React 和非 React 的代碼。

如果你想快速而隨性，這樣可以減少代碼量。否則，你應該使用受控組件。