前情提要：

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

你必須要知道：

因為 React 默認是單向數(shù)據(jù)流的處理方式。也就是說，我們可以動態(tài)綁定輸入框的值在 state （組件的狀態(tài)）當中，當數(shù)據(jù)發(fā)生改變時，我們必須手動監(jiān)聽輸入框的 onChange 事件，在事件處理函數(shù)中手動通過 this.setState() 方法驅(qū)動視圖的更新?！疽驗椴淮嬖谥噶畹母拍?，所以 React 只支持數(shù)據(jù)的單向流動（綁定），不同于 Vue 的 v-model 指令可以自動實現(xiàn)表單數(shù)據(jù)的雙向綁定。這個一定要清楚?！?/p>

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

應(yīng)用場景：

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

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