文科少女學程式

自己平常在寫Vue的時候，其實很常會使用到computed。因為當自己只是要一個被處理過後的值，在它被處理的過程中，又有一些相依的值時，就會使用computed。正確使用的話，不僅比較能節省效能，在程式碼的閱讀上，也更能一目瞭然地看到整體邏輯。因為實在是很愛使用computed(?)，在碰React的時候，也在想是不是在這樣對應的情境中，也能有類似computed效果的東東可以用？沒想到真的有耶！那個東東就是useMemo。

在進入今天的正題－useMemo之前，先來回顧一下Vue世界的computed。

Vue 的 computed
使用方法(以Vue3為主)
- 單純使用get：當有相依的變數有變動時，就會重新計算最後的結果值。但若相依的變數沒有改變，就不會重新計算。
*這裡還有一個重點是「這個值如果沒有使用在template上或其他的邏輯中，即使相依的值有變動，也不會重新計算」。

- 搭配set做使用：變動計算後的值時(例如範例的full name)，會觸發setter，若沒有設定setter，直接對計算後的值進行變更，會跳出錯誤(this._setter is not a function)。
需要直接操作到計算後的值時，就需要把set的部份加上，如下範例。


React的useMemo
使用方法
可以帶入兩個參數，第一個參數是一個寫著計算內容的callback funtcion，第二的參數則是一個陣列，可以內含有相依的變數。

當沒有帶入第二個參數時，不管實際相依的參數有無變動，每次渲染時，都會重新跑一次useMemo，重新進行一次計算內容去產生新的值。
當帶入的第二個參數為空陣列時，則只會在第一次整個DOM渲染完成時跑一次計算產生出值，並記錄下這個值。
當第二的參數的陣列中，有帶入值時，在整個DOM渲染完成後跑一次計算產生值後，只會在這些陣列裡的值有變動時，才會再次重新計算並產生新的值。
*與Vue不一樣的地方是「就算useMemo計算後的值沒有用在畫面上，也沒有被使用在其他邏輯中，只要第二的陣列參數裡的值有變動，一樣會進行重新計算的動作」。

關於computed & useMemo的優點&缺點
優點
- 避免不必要的重新渲染
有別於一般的function，不會在每次畫面重新渲染時都重跑一次對應的function，只會在相依的值有改變時，才重新進行計算，也就能減少不必要的重新渲染。
- 避免太複雜的邏輯在不必要的狀況下重新計算
缺點
- 使用時需要注意相依值，才能真正避免重複被計算太多次。
- 過度使用或使用不當，反而有可能會造成效能問題。

總結
最後也來個不專業比較圖做個總結吧！

雖然在Vue世界和React世界中，實務上對於這兩個類似的用法的使用情境應該會有些許差異，但某些程度上，這兩個用法使用的目的上還是有雷同。當有合適的情境出現時，就可以考慮要不要用這個方法。

好啦！這次的學習紀錄就到這裡啦！
(如果有誤解的部分，都歡迎跟我說)
打完收工！