表單
在 React 裏，HTML 表單元素的工作方式和其他的 DOM 元素有些不同。
一般來說，表單以及表單中的控件（如：input、select……）是頁面中與 JavaScript 打交道最多的元素了。雖然我們可以通過 ref 的
形式去操作它們，但是這樣會比較麻煩，React.js 爲我們提供了一個更好的方式把 React.js 中的數據以及邏輯與表單控件關聯起來。
受控組件
`受控組件` : 用 props 傳入數據的話，組件可以被認爲是受控（因爲組件被父級傳入的 props 控制）
`非受控組件` : 數據只保存在組件內部的 state 的話，是非受控組件（因爲外部沒辦法直接控制 state）
廣義來說，頁面中的任意元素都是一個獨立的組件，表單控件也是，它們內部也會維護屬於自己的狀態（如：value，selected，checked……），當然這些狀態是由原生實現的，而非 React.js 來控制的，但是有的時候我們希望通過 React.js 來管理和維護表單控件的狀態，我們把這種控件（控件）稱爲： **受控組件**， 針對不同的組件，狀態的維護方式也有所差異
- input
- textarea
- select
通過 state 來控制組件狀態
- 創建 state 與組件的某個狀態進行綁定
- 監聽組件某些事件來更新 state
input
通過受控組件，可以更加便捷的操控組件交互
textarea
textarea 與 input 類似，但是需要注意的是： 使用 value ，而不是 內容（innerHTML）
select
select 在 React.js 中也做了一些處理，不在是通過 selected 屬性來表示選中元素，而是通過 select 標籤的 value 屬性
多選
我們還可以設置多選 select，對應的 value 就是一個數組
單選
radio 和下面的 checkbox 需要注意的是，受控的屬性不在是 value ，而是 checked
非受控組件
話又說回來，通過上面的學習，我們知道，每個受控組件，且不同的類型的受控組件它能控制的狀態只有那麼一些：value、checked，
但是實際上一個組件的狀態遠遠不止這些，比如 input 的焦點、禁用、只讀 等，都是組件的狀態，如果每一個狀態都通過上面的方式
來管理，就會特別的麻煩了。這個時候，我們就需要用其他方式來處理了：DOM
Refs & DOM
React.js 提供了多種方式來獲取 DOM 元素
- 回調 Refs
- React.createRef()
ref 屬性
引用的意思，通過 ref 來綁定組件（原生元素），對組件（元素）進行操作
無論是 回調 Refs 還是 React.createRef()，都需要通過一個屬性 ref 來進行設置
回調 Refs
這種方式，我們在前面已經使用過了
React.createRef()
該方法返回一個 ref 對象，在 jsx 通過 ref 屬性綁定該對象，該對象下的 current 屬性就指向了綁定的元素或組件對象
建議
- 儘量避免從 props 中派生 state
- 儘量使用 props，避免使用 state