前言
近年前端技術層出不窮，Facebook 推出的 React 也是程序員間討論最多的 Javascript 框架之一。借這個機會開始學習 React，並把筆記作為 React 基礎教程系列（參考 React 官網）。
因為屬於入門，不太適合對 React 有經驗的同學，但希望到此的同學多少都有所收穫。
為了更好的閱讀體驗，可以在文章底下的“瞭解更多”中查看原文。
“狀態提升”概要
會有這樣的場景需要：
多個組件模塊共享同一組數據，並且這些子組件的數據有一定關聯（如，官網舉例的攝氏度和華氏度的例子）。由於 React 的數據通常交由 state 來動態更新，那麼官方建議將此類數據往上移至到父組件控制。
這樣所有的子組件的控制方都為同一個。這就叫
狀態提升（Lifting State Up）。例子說明
仿照官網 Demo，我弄了：斤和公斤的換算，最後判斷 input 輸入是否超重的例子。
頁面 HTML 效果：
功能說明：
超重 tip 欄單位為斤，當超過 100 斤時，提示超重；
子組件分兩個相同的 input 框，當對其中一個 input 輸入時，會聯動另一個輸入框；
輸入框的數據，會直接影響到 tip 提示欄；
代碼說明：
父組件元素結構如下
包含 2 個子組件：OverWeight、WeightInput
組件 OverWeight
根據 props.weight 來顯示提示信息。
組件 WeightInput
根據 props.weight 回填給 input 元素的 value，這樣 input 就能顯式數據值。
當 input 輸入數據時，觸發事件方法：handleChange，handleChange 內部調用從父組件中定義的
onWeightChangeFromParent 方法。注意，此時該方法的入參是：輸入值及單位類別（斤還是公斤）
這樣 WeightInput 和 OverWeight 中的數據都不由自己 state 來控制，統一由父組件的 props 傳入。
父組件 Calculator
這是個綜合組件，功能會略顯複雜。
首先通過構造器 constructor 定義該組件的 state 數據對象，及設置事件綁定：
對 OverWeight 組件設置入參屬性 weight：
注意，這個屬性是個方法計算結果。當組件更新後，將重新調用 render 方法，並觸發該方法：
這裡會根據當前 unit 單位來對 weight 進行換算。
之後對 WeightInput 組件的屬性設置會很重要。
首先定義 onWeightChangeFromParent 屬性，其值是 handleWeight 方法：
當子組件 WeightInput 觸發 onChange 後，會調用該屬性方法，傳入 weight 和 unit。
最後，handleWeight 會接收到這兩個參數，並通過 setState 更新數據。
然後是多個 WeightInput 數據聯動的實現，通過 updateWeight 方法：
在 JSX 模板上，分別定義固定的傳參（這裡分別傳入斤和公斤的單位標識）。判斷當前輸入組件是否和 state.unit 一致，不同的話就在另一個 input 框對 weight 單位換算，相同則原樣返回。
綜上，就能看到前文中所示的頁面效果。
總結
如官網所說，將子組件的 state 狀態數據提取到公共組件，通過父組件的數據流，設置 props 往下傳遞到子組件，將有利於問題的追溯，也對數據有個頂級統一的管理控制。
同時，子組件將專注自身核心的功能實現，不在額外多做狀態數據的管理。更符合程序設計中的單一職責原則。
閱讀更多 前端雨爸 的文章
