React 入門 5 - State Lifting

延續前一篇筆記 state 的概念和範例程式，繼續了解另一個跟state有關的重要概念 ─ State Lifting。

上次我們是利用瀏覽器提供的 prompt() 方法詢問成績，但為了完成這個動作得複製兩次 Student component 來完成，而前一篇學到state，我想應該可以透過state來記錄並顯示更新前後的成績。

為了記錄成績，理所當然地會先在跟成績有關的 Grade component 加上 state 變數，所以如下範例移除原本跟成績有關的 props、改成用 state 來顯示成績，目前修改的所有程式碼可參考這裡。

function Grade(props) {
  const [grade, setGrade] = useState(0);   // 改成用state記錄目前成績
  return (
    <div>
      <h1>{props.subject}</h1>
      <h3>
        Your {props.subject} grade is {grade} point.
      </h3>
    </div>
  );
}

做到這邊會發現有狀況了，因為 state 變數在 Grade component，修改 state 的函式 setState 當然也放在同一層，而原本要修改成績的按鈕卻放在父層的父層 Edit component。

React 文件有提到:

State is private and fully controlled by the component.

也就是，只有擁有這個state的component可以修改state。

為了解決這個狀況，這裡得去了解React資料流特性 ─ top-down data flow，即React可允許並且只允許上下層傳遞資料，這也代表state的控制權不一定要交給顯示這個狀態的component，也可以交由父層component（甚至父層的父層component）來管理，並將state當作props傳遞到原來要顯示state的子層components。

Ok，接下來綜合前面所學的props、state、event handling和top-down data flow資料流特性來解決前面的問題。

這篇文章的解法是：直接把原本在 Grade component 的state向上移動到 Edit component，並且在按鈕增加事件去呼叫可以用 setGrades 改變成績 state 的 updateGrades 函式。

function Edit() {
  const [grades, setGrades] = useState({
    Chinese: 0,
    English: 0,
    Math: 0
  });
  const updateGrades = () => {
    let tempGrades = {};
    Object.keys(grades).forEach((subject) => {
      tempGrades[subject] = prompt(`Enter your ${subject} grade:`);
    });
    setGrades(tempGrades);
  };
  return (
    <div>
      <main>
        <Student grades={grades} setGrades={setGrades} />
      </main>
      <button onClick={updateGrades}>Update your Scores</button>
    </div>
  );
}

像這樣把原本只能在子層component處理的state向上提升至父層層級的動作就稱為 State Lifting。

因為這次範例運用 state 和 state lifting 省略許多冗餘程式碼、修正過程比較複雜：例如原來有三個科目所以複製三次 <Grade /> ，而這裡運用 state可以儲存物件的方式也把科目和成績存成object，傳遞到 <Student /> 。完整程式碼可參考這裡。

不同以往只給一個 props Student(props) ，這次用解構(destructing)的方式 {grades} 取出 grades ，相當於 const {grades} = props;。

得到 grades 之後能用迴圈拜訪、傳遞相應的每個科目和成績，然後返回 <Grade /> 渲染在畫面上面，這樣不必複製三次程式碼，以後新增其他科目成績也較方便。

function Student({ grades }) {
  return (
    <div>
      {Object.keys(grades).map((subject) => (
        <Grade subject={subject} grade={grades[subject]} />
      ))}
    </div>
  );
}

最後來提 state lifting 的另一個好處 ─ 資料共享，意思是父層設定好 state 變數後也能將 state 傳遞給其他子層 components ，這樣在不同 components 就能共享同一份資料；或者若把改變狀態的函式傳遞到其他子層，所有同樣使用到這個 state 的 components 就能一併獲得最新、更新後的資料，也就是可確保不同 components 都能得到相同資訊。

References