[問題] React數據流的問題

看板Ajax作者 (AztecBunny)時間2年前 (2022/06/06 22:07), 編輯推噓2(208)
留言10則, 3人參與, 2年前最新討論串1/1
我知道React數據更新是父組件的state改變, 所有子組件都會重新render, 現在父組件上有一個簡單的開關, 點一下紅色再點一下變綠色這種, 1.以前用class在所有子組件上, 寫shouldComponentUpdate停止子組件因此重新render, 現在改用hook要怎麼寫? 2.接著我嘗試了Redux統一所有state在store裡, 那麼這個小開關的state,我該分開用hook嗎? 還是不論大小所有組件的state都放在store裡? 3.現在我又嘗試了ReduxToolkit + React-Redux, 以前用connect獲取store的state跟dispatch action出去, 現在改用useSelector跟useDispatch了,這兩個可以理解redux的hook版? 那又是相同的問題... 就是怎麼讓,只有改變相關數據的父組件更新,沒改變的子組件不用更新render 總結來說,我遇到的問題來源就是 class未來要逐步被淘汰了?那以往寫在class裡面的生命週期函數要怎麼處理? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.161.37.11 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1654524440.A.35B.html

06/07 06:31, 2年前 , 1F
1. 關鍵字:React.memo
06/07 06:31, 1F

06/07 06:37, 2年前 , 2F
2. 只在這個元件作用的 state 沒有放到 global state
06/07 06:37, 2F

06/07 06:37, 2年前 , 3F
(Redux) 的必要
06/07 06:37, 3F

06/07 06:38, 2年前 , 4F
3. 沒有無腦放global state 的話,就不會有這個問題
06/07 06:38, 4F

06/22 11:46, 2年前 , 5F
06/22 11:46, 5F

06/22 11:46, 2年前 , 6F
可以參考下,當初入坑react也是class component,也有遇
06/22 11:46, 6F

06/22 11:47, 2年前 , 7F
到要將class life cyele用function hooks重構的事。
06/22 11:47, 7F

06/22 11:49, 2年前 , 8F
話說Redux global state真的超好用的,如果有遇到需要
06/22 11:49, 8F

06/22 11:50, 2年前 , 9F
跨組件傳遞state的話,就知道好用了。
06/22 11:50, 9F

06/22 15:35, 2年前 , 10F
hook 的話何不用 useContext
06/22 15:35, 10F
文章代碼(AID): #1YdWeODR (Ajax)
文章代碼(AID): #1YdWeODR (Ajax)