[問題] React數據流的問題

作者: usagi719 (AztecBunny)   2022-06-06 22:07:18
我知道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裡面的生命週期函數要怎麼處理?
作者: brianwu1201 (bunny29)   2022-06-07 06:31:00
1. 關鍵字:React.memo2. 只在這個元件作用的 state 沒有放到 global state(Redux) 的必要3. 沒有無腦放global state 的話,就不會有這個問題
作者: jobintan (Robin Artemstein)   2022-06-22 11:46:00
https://bit.ly/3OvpSR8可以參考下,當初入坑react也是class component,也有遇到要將class life cyele用function hooks重構的事。話說Redux global state真的超好用的,如果有遇到需要跨組件傳遞state的話,就知道好用了。
作者: b85040312 (萬年newman)   2022-06-22 15:35:00
hook 的話何不用 useContext

Links booklink

Contact Us: admin [ a t ] ucptt.com