Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

[React] Lifting The State Up

Props 的用途是讓父子元件之間傳遞狀態,使子元件也能使用到父元件定義的狀態,而子元件的狀態也能透過 Lifting State 的方式提升給父元件使用。

初次看到這個觀念時,覺得這就像是 Vue 2 的 Emit,都是 From Child to Parent 的作法。

在 React 中,當父元件需要取得由子元件生成的 data 時,我們可以使用 Lifting The State Up 的技巧,同時因為狀態不是存放在父元件,子元件的改動並不會讓父元件執行 Re-rendering,某方面來說也是一種效能優化。

STEP 1:父元件傳遞一個函式給子元件

在 Parent component 建立一個函式,這個函式 (onXXX) 會作為 props 傳遞給 Child。

1// ParentComponent
2
3const xxxHandler = () => {
4  // do something...
5};
6
7// Return JSX
8<ChildComponent onXXX={xxxHandler} />;
9

STEP 2:子元件存取 Props 調用函式

在 Child 裡面執行 props.onXxx 函式,就等同執行了 Parent 的 xxxHandler 函式,因為函式傳遞的是 Pointer (By Reference)

1// ChildComponent
2
3props.onXxx();
4

STEP 3:從子元件傳入參數,達到 State 提升

從 Child 放入參數,透過呼叫函式來傳遞給 Parent。

1// ChildComponent
2
3const childData = {
4  title: 'Child Title',
5  data: new Date(),
6};
7
8props.onXxx(childData);
9

這時候 Parent 就可以從參數獲得 Child 的資料了,此時就完成了提升 State 的動作了。

1// ParentComponent
2
3const xxxHandler = (enteredChildData) => {
4  // do something...
5  const childData = { ...enteredChildData };
6  console.log(childData);
7};
8
9// Return JSX
10<ChildComponent onXXX={xxxHandler} />;
11

Recap

  • Lifting The State Up

References