6月安卓手機(jī)性價比榜：Note 12 Turbo斷層式碾壓
6月份有一個618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進(jìn)了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產(chǎn)品也出現(xiàn)了歷史低價，那么各個價位段的產(chǎn)品性價比
在React應(yīng)用中過度優(yōu)化真的是一種噩夢。我們每天都要面對大量無用的優(yōu)化，這些優(yōu)化意在使代碼變得“神秘”。一些開發(fā)人員甚至將 useMemo 和 useCallback 納入他們的默認(rèn)風(fēng)格指南中，以簡化事情。不要陷入這種迷思，因為 useMemo 甚至可能會減慢你的應(yīng)用程序速度！記住，記憶化并不是免費的。
在這篇文章中,向你展示大多數(shù)開發(fā)人員如何過度使用 useMemo 鉤子，并提供一些避免這種情況的技巧。當(dāng)我第一次意識到我犯了這些錯誤時，我感到非常愚蠢。話不多說，開始吧！
useMemo 是一個允許我們在組件重新渲染之間緩存計算結(jié)果的鉤子。毫無疑問，它僅用于性能原因，并且應(yīng)該與其他技術(shù)如 React.memo、useCallback、debouncing、并發(fā)渲染等一起使用。
盡管在某些情況下，這個鉤子確實有幫助，并且發(fā)揮了重要作用，但大多數(shù)開發(fā)人員卻錯誤地使用它。他們將每個變量都用 useMemo 包裹起來，希望隨機(jī)的優(yōu)化能帶來成功。不出所料，這種方法只會導(dǎo)致代碼可讀性差和內(nèi)存使用增加。
另一個需要記住的重要事項是，useMemo 只有在重新渲染階段才有價值。在初始化期間，記憶化(memoization)會減慢應(yīng)用程序的速度，并且這種影響會逐漸累積。這就是我所說的“記憶化并不是免費的”的意思。
現(xiàn)在，看看下面的例子。這些都是我從一個項目中拿來的真實代碼片段。你能說出哪個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 組件，或緩存一些昂貴的計算。
現(xiàn)在想一想，我們在上面的例子中優(yōu)化了什么？我們有原始值，并沒有將任何更深層次的內(nèi)容傳遞到組件樹中，所以我們不需要保留引用。而且.split和===似乎不是需要記憶化的復(fù)雜計算。因此，我們可以輕松地在這個例子中去掉useMemo，節(jié)省一些文件空間 :)
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。你認(rèn)為優(yōu)化tabs創(chuàng)建的主要意圖是什么？這根本不是一個計算問題，所以實現(xiàn)它的人可能是想要保留引用并避免 NavTabs 的過度重新渲染。這在這里是正確的做法嗎？
首先，NavTabs 是一個輕量級組件，可以多次重新渲染而不影響性能。其次，即使它是一個重量級組件，useMemo 也不會起作用。僅僅保留引用不足以防止 NavTabs 在每次Client組件重新渲染時重新渲染。為了優(yōu)化性能，我們應(yīng)該用React.memo包裹 NavTabs。
memo 函數(shù)返回我們組件的記憶化版本。只要它的 props 沒有改變，這個版本通常不會在其父組件重新渲染時重新渲染。memo 使用淺比較props來決定組件是否應(yīng)該更新。如果你有一些特定條件來決定組件何時應(yīng)該重新渲染，你甚至可以指定自己的比較函數(shù)作為 memo 的第二個參數(shù)。
除非你在執(zhí)行成千上萬項復(fù)雜循環(huán)或計算階乘，否則它可能不昂貴。你可以結(jié)合使用React Profiler和performance.now()來識別瓶頸，然后再應(yīng)用優(yōu)化技術(shù)。
避免在以下情況下使用 useMemo：
React 組件每次重新渲染時都會運行其主體，這發(fā)生在其道具或狀態(tài)發(fā)生變化時。通常情況下，我們希望避免在渲染過程中進(jìn)行昂貴的計算，因為它們會減慢組件的運行速度。
然而，大多數(shù)計算仍然非常快，因此很難理解哪些地方確實需要使用 useMemo。要開始有效且有目的性地進(jìn)行優(yōu)化，首先應(yīng)找出問題所在。此外，不要忘記其他技術(shù)，例如：useCallback、React.memo、debouncing、代碼拆分、lazy-loading 等。
我們看下面一個非常簡單的例子。doCalculation 是一個人為放慢速度的函數(shù)，因此它需要 500ms 才能返回一個隨機(jī)數(shù)。那么我們在這里遇到了什么問題呢？是的，每次值更新時，我們都要重新計算我們的重函數(shù)，這使得使用輸入變得非常困難。
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> );}我們?nèi)绾谓鉀Q這個問題？只需用useMemo包裹doCalculation而不加任何依賴項。
const calculation = useMemo(() => doCalculation(), []);現(xiàn)場實例:
https://codesandbox.io/s/happy-grass-0mjpbw?from-embed。
本文鏈接：http://www.tebozhan.com/showinfo-26-92175-0.html現(xiàn)在停止濫用useMemo吧！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號