現在停止濫用useMemo吧！
在React應用中過度優化真的是一種噩夢。我們每天都要面對大量無用的優化，這些優化意在使代碼變得“神秘”。一些開發人員甚至將 useMemo 和 useCallback 納入他們的默認風格指南中，以簡化事情。不要陷入這種迷思，因為 useMemo 甚至可能會減慢你的應用程序速度！記住，記憶化并不是免費的。
在這篇文章中,向你展示大多數開發人員如何過度使用 useMemo 鉤子，并提供一些避免這種情況的技巧。當我第一次意識到我犯了這些錯誤時，我感到非常愚蠢。話不多說，開始吧！
為什么我們使用useMemo？
useMemo 是一個允許我們在組件重新渲染之間緩存計算結果的鉤子。毫無疑問，它僅用于性能原因，并且應該與其他技術如 React.memo、useCallback、debouncing、并發渲染等一起使用。
盡管在某些情況下，這個鉤子確實有幫助，并且發揮了重要作用，但大多數開發人員卻錯誤地使用它。他們將每個變量都用 useMemo 包裹起來，希望隨機的優化能帶來成功。不出所料，這種方法只會導致代碼可讀性差和內存使用增加。
另一個需要記住的重要事項是，useMemo 只有在重新渲染階段才有價值。在初始化期間，記憶化(memoization)會減慢應用程序的速度，并且這種影響會逐漸累積。這就是我所說的“記憶化并不是免費的”的意思。
什么時候它沒有用甚至有害？
現在，看看下面的例子。這些都是我從一個項目中拿來的真實代碼片段。你能說出哪個useMemo的使用實際上有意義嗎？
export const NavTabs = ({ tabs, className, withExpander }) => {
const currentMainPath = useMemo(() => {
return pathname.split("/")[1];
}, [pathname]);
const isCurrentMainPath = useMemo(() => {
return currentMainPath === pathname.substr(1);
}, [pathname, currentMainPath]);
return (
<StyledWrapper>
<Span fontSize={18}>
{isCurrentMainPath ? (
t(currentMainPath)
) : (
<StyledLink to={`/${currentMainPath}`}>
{t(currentMainPath)}
</StyledLink>
)}
</Span>
</StyledWrapper>
);
};通常我們在兩種情況下使用 useMemo：記住一個引用并將其傳遞給 memo 組件，或緩存一些昂貴的計算。
現在想一想，我們在上面的例子中優化了什么？我們有原始值，并沒有將任何更深層次的內容傳遞到組件樹中，所以我們不需要保留引用。而且.split和===似乎不是需要記憶化的復雜計算。因此，我們可以輕松地在這個例子中去掉useMemo，節省一些文件空間 :)
export const Client = ({ clientId, ...otherProps }) => {
const tabs = useMemo(
() => [
{
label: t("client withdrawals"),
path: `/clients/${clientId}/withdrawals`
},
...
],
[t, clientId]
);
...
return (
<>
...
<NavTabs tabs={tabs} />
</>
)
}
export const NavTabs = ({ tabs, className, withExpander }) => {
return (
<Wrapper className={className} withExpander={withExpander}>
{tabs.map((tab) => (
<Item
key={tab.path}
to={tab.path}
withExpander={withExpander}
>
<StyledLabel>{tab.label}</StyledLabel>
</Item>
))}
</Wrapper>
);
};在上面的例子中，我們將tabs變量記憶化，然后將其傳遞給 NavTabs。你認為優化tabs創建的主要意圖是什么？這根本不是一個計算問題，所以實現它的人可能是想要保留引用并避免 NavTabs 的過度重新渲染。這在這里是正確的做法嗎？
首先，NavTabs 是一個輕量級組件，可以多次重新渲染而不影響性能。其次，即使它是一個重量級組件，useMemo 也不會起作用。僅僅保留引用不足以防止 NavTabs 在每次Client組件重新渲染時重新渲染。為了優化性能，我們應該用React.memo包裹 NavTabs。
memo 函數返回我們組件的記憶化版本。只要它的 props 沒有改變，這個版本通常不會在其父組件重新渲染時重新渲染。memo 使用淺比較props來決定組件是否應該更新。如果你有一些特定條件來決定組件何時應該重新渲染，你甚至可以指定自己的比較函數作為 memo 的第二個參數。
如何判斷計算是否昂貴？
除非你在執行成千上萬項復雜循環或計算階乘，否則它可能不昂貴。你可以結合使用React Profiler和performance.now()來識別瓶頸，然后再應用優化技術。
避免在以下情況下使用 useMemo：
- 試圖優化的計算很便宜。在這些情況下，使用useMemo的開銷將超過其帶來的好處。
- 不確定是否需要記憶化。最好先不使用它，然后在出現問題時逐步將優化引入代碼。
- 記憶化的值沒有傳遞到組件中。如果該值僅在JSX中使用，并且沒有傳遞到組件樹中，大多數情況下你可以避免優化。沒有必要記住它的引用，因為它不會影響其他組件的重新渲染。
- 依賴數組變化太頻繁。在這種情況下，useMemo不會帶來任何性能優勢，因為它每次都會重新計算。
如何正確使用的技巧
React 組件每次重新渲染時都會運行其主體，這發生在其道具或狀態發生變化時。通常情況下，我們希望避免在渲染過程中進行昂貴的計算，因為它們會減慢組件的運行速度。
然而，大多數計算仍然非常快，因此很難理解哪些地方確實需要使用 useMemo。要開始有效且有目的性地進行優化，首先應找出問題所在。此外，不要忘記其他技術，例如：useCallback、React.memo、debouncing、代碼拆分、lazy-loading 等。
我們看下面一個非常簡單的例子。doCalculation 是一個人為放慢速度的函數，因此它需要 500ms 才能返回一個隨機數。那么我們在這里遇到了什么問題呢？是的，每次值更新時，我們都要重新計算我們的重函數，這使得使用輸入變得非常困難。
function doCalculation() {
const now = performance.now();
while (performance.now() - now < 500) {
// 停頓500毫秒
}
return Math.random();
}
export default function App() {
const [value, setValue] = useState(0);
const calculation = doCalculation();
return (
<div>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<h1>{`Calculation is ${calculation}`}</h1>
</div>
);
}我們如何解決這個問題？只需用useMemo包裹doCalculation而不加任何依賴項。
const calculation = useMemo(() => doCalculation(), []);現場實例:
https://codesandbox.io/s/happy-grass-0mjpbw?from-embed。
