關于受控組件與非受控組件筆記
受控組件的用途
對于受控組件來說，每一次 state(狀態) 變化都會伴有相關聯的處理函數。這使得可以直接修改或驗證用戶的輸入。比如，如果我們希望強制 name 的輸入都是大寫字母，可以這樣來寫 handleChange 方法：
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
常用于form表單元素，需要為每一個可更改的數據提供事件處理器，并通過 React 組件管理所有輸入狀態。另外，必須通過state設定初始值，如input value，簡而言之，受控組件由React進行管理和控制渲染，而非受控組件則由瀏覽器對DOM元素進行管理和渲染，通過ref獲取相關的元素，對元素的屬性值等進行操作，而不通過state進行管理
非受控組件
狀態和事件由瀏覽器或借助refs進行管理
const MyComponent extends Component {
onClick() {
const input = this.refs.myInput;
const value = input.value;
// do something with the value
}
render() {
return <input type="text" ref="myInput" />
}
}
常見問題
首次渲染時，若表單元素如input的value= this.state.name 未被設置, 值將默認賦值為undefined, 當ReactDOM檢查一個field是否受控是，它會檢查[if value != null]
(https://github.com/facebook/react/blob/751b76e3518883c31b6105736c2b13839863fdef/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js#L28) , 對于 undefined == null 為true, 被判斷為非受控表單，故若是受控表單元素未賦初始值，將會產生警告。
延伸閱讀
下面兩篇文章對詳細的受控表單等講述很清楚，后一篇則通過會話的方式形象生動的描述的兩者的區別，有興趣的可以深入閱讀
React.js Forms: Controlled Components
React "controlled" vs "uncontrolled" inputs explanation
其他
)
