search

DoubleTian-tw / pokemon-Gym

https://pokemon-gym.vercel.app/
9 stars 1 forks source link

重構Component #17

Closed DoubleTian-tw closed 7 months ago

DoubleTian-tw commented 7 months ago

嘗試將父子關係的Component進行重構

vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
pokemon-gym ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 6, 2024 7:43am
QzCurious commented 7 months ago

是有順利避掉 src/components/Hero/Hero.jsx 這層了，但一路往下還是有很多層都依賴 id:

https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Heros.jsx#L339-L438

~你再試看看有沒有辦法把 ID_SELECT, ID_BEEN_SELECT, ID_DAMAGE 都刪掉~。 我剛剛看了一下 ID_SELECT, ID_BEEN_SELECT, ID_DAMAGE 在其他地方有被用到，所以應該是沒辦法完全被移除，但我要說的是把 Herors 一個 Dropdowns 綁一個 id 的邏輯簡化。

不過這個 PR 先和進去 main 吧，再往上疊更多修改我看不動了。

QzCurious commented 7 months ago

你再試看看有沒有辦法把 ID_SELECT, ID_BEEN_SELECT, ID_DAMAGE 都刪掉。

我們來看看一個 id "往下" 追，什麼時候它才真的有被用到

  1. 從 ID_SELECT 開始 https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Heros.jsx#L342
  2. Dropdowns 完全沒用到 id，直接往下傳給 ButtonGroups https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Dropdowns.jsx#L6-L30
  3. ButtonGroups 也是沒用到 id，直接傳給 DisplayInfo https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/ButtonGroups.jsx#L229-L243
  4. 這邊開始就比較玄比較難追了，我們要利用 id 去指定其他變數，這個動作會讓程式追蹤發生一個比較嚴重的斷點，我們會需記得 id 被誰傳下來，又是帶著什麼值被傳下來，再繼續往下追 selectType, handleEvent 的邏輯 https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/ButtonGroups.jsx#L152-L167
  5. 然後 BtnContainer 大概在追個 2, 3 步就追完 id 的做用了

以上大約可以看成有 7, 8 步的回追成本

由於我們知道其實 ID_SELECT, ID_BEEN_SELECT, ID_DAMAGE for Dropdowns 是在 "Auth time" (# 我發現其實很少人用這個詞，但之前解釋過你應該知道我的意思) 就被決定

https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Heros.jsx#L342

https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Heros.jsx#L382

https://github.com/DoubleTian-tw/pokemon-Gym/blob/c8f2804a932338923a5ddf370a15f061242c53eb/src/components/Hero/Heros.jsx#L400

其實就可以在不往下追的情況下判斷出 ID_SELECT, ID_BEEN_SELECT, ID_DAMAGE 相依的邏輯是可以直接寫在上面三處 (或寫得離此處更近)，這時回追成本基本上就剩 1 或 2 了，程式會變得一目瞭然。

QzCurious commented 7 months ago

close #13