前言
這系列是 React 基礎教程（參考 React 官網），記錄了自己入門學習 React 的筆記。不太適合有 React 豐富經驗的同學，但希望看到此文的你，多少都有些收穫。
文章代碼均可在我的碼雲中找到：https://gitee.com/eminoda/react-learn/branches
為了更好的閱讀體驗，可在底下的“瞭解更多”查看原文（我的語雀知識庫）。
受控組件
表單元素（input、textarea、select 等）涉及輸入/顯示數據，一般用 state 來定義，並通過 setState 來更新。
就這樣在 React 保證了一定的更新機制，這種控制表單元素的方式稱為："受控組件"。
說白了就是將表單數據交付給 React 的 state 來管理。
下面示例這些標籤用法：
input
input 通過 onChange 觸發事件，從 event 中拿到輸入的值：
將該值設置到 state 對象中：
頁面效果：
textarea
注意的是，為了和 input 和一樣使用的方式，也在 textarea 中設置了 value 屬性。
select
select 會略複雜，設計 options 選項的初始化定義，以及當前選項的定義。
通過遍歷，定義 option 的 JSX 模板：
頁面效果：
多 input 事件觸發的封裝
模擬一個稍稍複雜的表單，裡面會有幾個 input 元素。試想，如果每個 input 上定義一個事件函數，那將多冗餘。
所以就有了如下使用方式，針對多 input 情況下的表單：
能看到表單的 JSX 模板上，定義了相同的事件函數 handleMultipleInput ，為了區分 input ，定義了不同的 name 屬性：
最後通過統一的處理，來完成對這個表單數據對象的修改更新：
當然還有中需求，可能會對錶單有些歷史數據的回填，下面是示例：
比如，初始數據要對 sex 默認選中 female：
就要對模板這樣修改：
事件中，有針對性的判斷：
非受控組件
用法示例
如果瞭解 React 的 Ref 引用，那麼就知道我們可以通過 Ref 的方式，直接獲取 Dom 節點的引用，然後對錶單的數據進行操作。
示例：
初始化 Ref ：
將 Ref 交給 ref 屬性，由 React 來對 Ref 進行 Dom 賦值：
測試：通過對應的事件方法，能實時獲取到 input 輸入的 value：
和"受控組件"不同，input 元素沒有依靠 value={this.state.value} 這樣的形式來顯示數據。
初始化默認值
不像受控組件，可以在構造器中初始化 state 對象；對於非受控組件設置默認值需要其他方式：
通過 defaultValue 來指定首次渲染的數據。針對 checkbox、radio 是 defaultChecked 來指定。
受控和非受控的區別
受控組件
利用 state 實現數據的同步顯示，這樣有助於 form 表單驗證的提示；
以及表單一些特殊情況的設置（disabled、級聯顯示等）
非受控組件
而非受控組件不擅長上述需求的定製，可以說偏業務簡單的需求。因為表單數據可以直接從引用拿到，而且不帶"副作用"（不像受控組件拿到子組件的實例全部引用）
當然非受控組件不是那麼"無用"，比如像 input 的 file 類型，更是它使用的獨特場景。因為此 input 需要顯示的值，我們控制不了。
總結
像受控組件，某種程度和 vue 或者 angular 的 model 類似，都有雙向綁定的特點。
不管使用受控，還是非受控，React 能單獨分離出這兩個概念，我感覺很新奇。相信隨著日益豐富的經驗，這兩者的使用會越來越準確。
最後，個人看官方文檔還沒有看到類似指令 directive 概念的出現，畢竟指令是專門處理 DOM 操作的地方。
相反，React 通過 Refs 來專項處理 DOM 操作，雖然"簡單暴力"，但總感覺是硬湊上去的概念，尤其是 Refs 的轉發（個人觀點）。
閱讀更多 前端雨爸 的文章
