考慮使用 useMemo/useCallback 計算量大的時間限制

Question

根據包括React 文檔在內的數十篇文章，使用useCallback和useMemo鈎子有助於防止不必要的重新渲染。

另一方面，這些性能優化掛鈎不是免費的，而是需要付費的。 他們的收益可能並不總能抵消該成本。 以便

大多數時候你不應該費心去優化不必要的渲染

肯特 C說。多茲。

所以應該有一個工具來衡量一個函數/變量是否計算成本高並且不能是相對的（例如，將console.time()和console.timeEnd()放在前后）。

對於我們的大多數產品用戶來說，是否有超出時間的數字被認為是計算量大的？

Answer 1

對於我們的大多數產品用戶來說，是否有一個數字超出了計算量？

據我所知，沒有標准定義。 在大多數情況下，它不是必需的（即使對於看起來很復雜的計算 - 計算機速度很快）。

作為一般經驗法則，如果您看到/注意到 dom 更改的延遲 - 那么是時候開始尋找性能瓶頸了

Answer 2

可以選擇在開發期間放置控制台日志，並檢查您在瀏覽器檢查器中看到 output 的次數。

useMemo 似乎總是不做它應該做的事情，有時甚至似乎比使用 useCallback 做更多的計算。

React 網站上沒有任何官方文檔顯示如何正確使用 useMemo 的可靠示例。 它通常是常見的偽代碼，例如

function (props) {
 const a = useMemo(() => {
 
 //some expensive calculation
 return b;
}, [props]);