練習思考 "回追成本"

[QzCurious]

寫程式的時候可以一邊思考”回追”的成本，成本當然越低越好。

比如說某個 component 用到了某個外部來的變數 A，他的回追成本大概會是:

• 回追到該變數 A 在哪被定義、初始化
• 回追到該變數 A 為什麼會被更新
• 回追到該變數 A 可能是被誰、什麼情況下改變

這個成本雖然很難量化，但可以看成是你要做幾次 “上一步”:

1. 從 A 被使用的地方回追到在該檔案內它是哪裡來 (這時找到的地方先稱為 [1])
2. [1] 又是從哪個地方來 (這時找到的地方先稱為 [2])
   • 可能來自 props
   • 可能來自 context
   • 可能來自 import
   • 可能來自 global
   • 等等
3. [2] 的情況有可能跟第一步的 A 的狀況一樣，然後又要繼續 “上一步” 往復循環

任務

• Trace typeClass 來體驗一下他的回追成本

• 練習 - 假設已知 “checkbox - 道館常見角色”
  
  是 <CheckboxShowPopular />，來回追他會什麼會顯示在畫面上

• 思考、嘗試看看以上是否能減少回追成本

  • 沒有減少回追成本沒有關係，畢竟不是所有成本都該被降低
  • 你也可以反應你認為該成本存在的必要性

[DoubleTian-tw]

新增Branch ComponentModify
嘗試將Component進行重構，讓回追成本減低，盡量直接敘述Parent Component擁有那些Child Component，而非透過ID再多一層的判斷，但相對的在Heros.jsx中程式碼增加，或許可以有更好的寫法