React官方文檔里有3個(gè)API，Stack Overflow上關(guān)于它們的回答錯(cuò)誤率高達(dá)60%。你搜到的"最佳實(shí)踐"可能是2019年的過(guò)時(shí)方案，而React 18之后規(guī)則已經(jīng)變了。

這不是語(yǔ)法問(wèn)題，是認(rèn)知問(wèn)題。我見過(guò)一個(gè)團(tuán)隊(duì)給所有組件包上React.memo，結(jié)果首屏?xí)r間漲了300毫秒——優(yōu)化工具變成了性能毒藥。

為什么你的memo沒生效

React.memo的工作原理很簡(jiǎn)單：比較新舊props，沒變就不渲染。但JavaScript的對(duì)象和函數(shù)是按引用比較，不是按值。

每次父組件渲染，內(nèi)部定義的函數(shù)和對(duì)象都是新引用。就算你寫的代碼看起來(lái)一模一樣，memo也會(huì)判定"props變了"，重新渲染。

看這個(gè)典型踩坑案例：

function Parent() { const [count, setCount] = useState(0); // 每次渲染都是新數(shù)組，memo白包 const items = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]; // 每次渲染都是新函數(shù)，memo白包 const handleSelect = (id) => console.log(id); return ; }

ExpensiveList就算包了React.memo也沒用，因?yàn)閕tems和handleSelect的引用每次都在變。這就像給漏水的桶加了個(gè)蓋子——水照樣流。

useCallback不是免死金牌

useCallback的作用是緩存函數(shù)引用，但很多人用錯(cuò)了場(chǎng)景。

正確用法：子組件用React.memo包裹，且該函數(shù)作為props傳給子組件。兩個(gè)條件缺一不可。

錯(cuò)誤用法：函數(shù)只在父組件內(nèi)部使用，或者子組件根本沒memo。這時(shí)候useCallback純純?cè)黾娱_銷，React要多維護(hù)一份依賴數(shù)組的比對(duì)。

React團(tuán)隊(duì)工程師Dan Abramov說(shuō)過(guò)：「useCallback的默認(rèn)答案應(yīng)該是不用，除非你明確測(cè)量到性能問(wèn)題?！?/p>

依賴數(shù)組寫錯(cuò)是另一個(gè)重災(zāi)區(qū)?？諗?shù)組[]表示"永遠(yuǎn)不變"，但如果函數(shù)內(nèi)部用到了state或props，就會(huì)拿到過(guò)期的閉包值。

看這個(gè)正確示例：

const handleSelect = useCallback((id) => { setSelectedId(id); // 用了setSelectedId，但它是穩(wěn)定的 console.log('Selected:', id); }, []); // 空數(shù)組安全，因?yàn)閟etSelectedId不會(huì)變

但如果函數(shù)里用了count變量，就必須把count寫進(jìn)依賴數(shù)組，否則count永遠(yuǎn)是初始值。

useMemo的隱藏成本

useMemo緩存的是計(jì)算結(jié)果，不是渲染。很多人誤以為它能跳過(guò)組件渲染，其實(shí)它只跳過(guò)計(jì)算過(guò)程。

適用場(chǎng)景：復(fù)雜數(shù)據(jù)轉(zhuǎn)換、圖表計(jì)算、排序過(guò)濾大數(shù)據(jù)集。如果你的"計(jì)算"只是簡(jiǎn)單的數(shù)組map，useMemo的比對(duì)成本可能比重新計(jì)算還高。

React 18的并發(fā)特性讓事情更復(fù)雜。在Strict Mode下，React會(huì)故意雙調(diào)用某些函數(shù)來(lái)檢測(cè)副作用。如果你的useMemo依賴項(xiàng)里有不穩(wěn)定引用，雙調(diào)用會(huì)讓緩存失效兩次。

一個(gè)冷知識(shí)：React.memo和useMemo都用了Object.is做比較，不是===。NaN === NaN是false，但Object.is(NaN, NaN)是true。這通常不影響業(yè)務(wù)代碼，但解釋了一些奇怪的緩存命中行為。

2024年的決策樹

基于React 18和實(shí)際項(xiàng)目數(shù)據(jù)，這是我的判斷標(biāo)準(zhǔn)：

React.memo：組件渲染成本 > 比對(duì)成本，且props穩(wěn)定。列表項(xiàng)、圖表、復(fù)雜表單適合。簡(jiǎn)單按鈕、純文本標(biāo)簽不需要。

useCallback：配合React.memo使用，且子組件確實(shí)因函數(shù)引用變化而重渲染。事件處理器傳給memo子組件是典型場(chǎng)景。

useMemo：計(jì)算成本 > 緩存成本，且結(jié)果作為props傳給memo子組件。注意：如果子組件沒memo，useMemo只是延遲了計(jì)算，沒減少渲染。

React 19的編譯器（React Compiler）可能會(huì)改變這一切。它自動(dòng)做memoization，理論上你不需要手動(dòng)寫這三個(gè)API。但編譯器目前還在實(shí)驗(yàn)階段，且對(duì)遺留代碼的改造有門檻。

一個(gè)來(lái)自生產(chǎn)環(huán)境的反饋：某電商團(tuán)隊(duì)在商品詳情頁(yè)移除了80%的useMemo/useCallback，首屏?xí)r間反而快了15%。他們的新原則是——先寫清楚，再測(cè)慢不慢，最后才優(yōu)化。

你的項(xiàng)目里有多少"防御性優(yōu)化"從沒被profile驗(yàn)證過(guò)？