第二組讀書會 - 4-1~4-3

[HLTVProxy]

《React 思維進化》讀書會第二組 4-1~4-3

簡報

4-2 Function component 與 class component 關鍵區別

『function component 會自動捕捉該次 render 時的 props 與 state 資料』是什麼意思?

• 範例

  function App(){
    //..
    return (
     <Foo number={xxx} /> 
    )
  
  }
  
  function Foo(props) {
   const [dataArray, setDataArray] = useState([]);
  
  }
  

  • render App 時，也會觸發 render Foo，這時 React 會將要傳給 Foo 的 props 物件(props 物件內容是{ number: xxx })傳給 fiber node，紀錄最新的 props
  • 接著要 render Foo 時，Foo 會從 fiber node shallow clone 一份目前最新版本的 props，將複製的這份 props 作為參數傳入 Foo 的 component function
    • props 要 shallow clone 是因為他是物件，物件會有 reference 問題，所以需要複製一份，以避免每次都只能取到最新的 props
    • 之前提過 props 會被 Object.freeze 以避免被更改，Object.freeze 是針對複製出來的這一份資料
  • 執行到 useState 時，會更新 fiber node 中的 state(計算待執行佇列)，接著回傳目前版本的 state 值，存進 component local variable 成為 snapshot
    • 回傳 state 值不會再做 shallow clone，而是直接回傳值並存在 function component 內的區域變數；也因為是直接回傳，如果 state 是物件型別，就要避免 mutate，不然跨 render 的 state 值就會被影響，因為是 mutate fiber node 裡面的同一個 reference
    • state 不用做 shallow clone 是因為不會有多個 state 一起包成一個物件，而是各自的值(e.g. count 的 state 值、number 的 state 值)
• 小結
  • 每次 render component 會從 fiber node shallow clone 該次 render 父元件傳下來的 props 給 component
  • props 資料:
    • 父 component re-render 時，觸發子 component re-render => 將要傳給子 component 的 props 存進 fiber node => render 子 component => 從 fiber node shallow clone 一份目前最新版本的 props 給子 component，作為 component function 參數傳入
  • state 資料:
    • setState => 觸發 re-render => 執行到 useState => 更新 fiber node 中的 state => shallow clone 造出 snapshot 並從 return useState => 存進 component local variable

  function Foo(props) { //props => 這個物件是從 fiber node  中 shallow clone 出來的 
     const [dataArray, setDataArray] = useState(); //dataArray =>這個值從 fiber node 取出時不會特別 clone
  }
  

延伸問題:為什麼 useRef 回傳的值會是 Object?

• 它可以模擬 class 的 this.xx 的方式
• 用 ref 方式可以跨 render 存取資料
• 當你使用 ref.current.xx 可以取得最新資料值
• 何時使用?
  • 當你想要維持跨 render 資料
  • component 內的全域變數(跨 render)
• useRef Docs

QA

function component 和 class component 差異

• 同:
  • function component 和 class component 都有 fiber node
  • function component 和 class component 都會幫你複製一份屬於這次版本的 props
• 異:
  • 雖然都有複製 props，但 class component 把值給你的時候是覆蓋進 this 上，而 this 可能被修改，this 是取得這物件上最新的屬性值；而 function component 則是直接回傳 props
  • 關鍵是 this 可能被修改，props 本身還是 immutable 的

觸發生命週期的時機

• 何時 mount: 發現這 component 沒出現過，就 mount
• 何時 update: 比較後發現同樣類型的 component 在同樣位子，就 re-render 它，並且更新不一樣的地方(例如綁定新的 event handler)
• 何時 unmount: 比較後發現上次 component 在的地方，這次已經沒有這個 component，或 compoent 類型不同，那就unmount 這 component

Unmount 過程中，是先移除 DOM 元素還是先執行 cleanup function?

• Unmount 時，會先移除 DOM element，才會執行 cleanup function
• 書上順序是錯的，p.242 Unmount 的第 2 點跟第 3 點應該反過來

component 不能自己 unmount 自己

• component 不能自己 unmount 自己，只能是你的父 component 沒有要渲染這個子component，這子 component 才會unmount
• 如果父 component 裡面固定會有這個子 component(不是條件式出現此子 component)，那只有父 component 被 unmount 時，這個子 component 才會被 unmount

Unmount 有 render phase 和 commit phase 嗎?

• Unmount 沒有 render phase 和 commit phase
• 為何沒有 render phase?
  • 不要這 component 了，也就不需要 render
• 為何沒有 commit phase?
  • 可以想成是在父 component 的 commit phase、要更新差異處對應的 DOM element 時，就移除這個 DOM element，以及執行此 component 最後一次 render 的 cleanup function
  • 補充: unmount 執行的不是新一次 render 時的 cleanup function，是執行前一次的 cleanup