用React寫(xiě)函數(shù)組件，如何避免重復(fù)渲染？

場(chǎng)景：

有一個(gè)自定義的item組件， 它的onClick方法是父組件透?jìng)鞯?。父組件中含有大量的item。

當(dāng)父組件更新時(shí)，onClick會(huì)被重新創(chuàng)建，由于函數(shù)跟常量不一樣，是一個(gè)引用，因此即使item用了React.memo包裹，也會(huì)認(rèn)為props中傳過(guò)來(lái)的onClick是新創(chuàng)建的，導(dǎo)致所有item都會(huì)重新渲染。

如果用useCallback來(lái)包裹onClick，確實(shí)可以避免不相關(guān)的item渲染，但是如果item是作為一個(gè)對(duì)外提供的組件，并不能保證開(kāi)發(fā)者有使用useCallback的意識(shí)

問(wèn)：這種情況我該如何優(yōu)化我的組件設(shè)計(jì)呢

?

這是react埋的坑，它埋的坑多的數(shù)不勝數(shù)，有的時(shí)候真覺(jué)得垃圾。

React組件重建vdom取決于兩個(gè)因素 props和state。你這種情況是說(shuō)，props接收不受你控制，其他人也不管性能問(wèn)題，胡寫(xiě)瞎寫(xiě)。說(shuō)來(lái)說(shuō)去，都是react官方埋的坑。

針對(duì)你上述具體問(wèn)題，你可以在你的組件外面套一個(gè)React.memo，它有第二個(gè)參數(shù)，用來(lái)決定你傳入的props是否變化，具體用法看官方文檔。判斷的時(shí)候，你直接忽略onClick，因?yàn)榇蟛糠謭?chǎng)景下回調(diào)函數(shù)都不會(huì)發(fā)生變化，誰(shuí)會(huì)設(shè)計(jì)根據(jù)一個(gè)回調(diào)函數(shù)來(lái)重新渲染界面呢？除非要把函數(shù)的字符串顯示在界面上……這種場(chǎng)景沒(méi)見(jiàn)過(guò)。

基于這個(gè)想法，我們還可以基于React.memo封裝一個(gè)高階函數(shù)，所有函數(shù)組件都用這個(gè)高階函數(shù)包裝。再定個(gè)規(guī)矩，所有以on開(kāi)頭的回調(diào)函數(shù)傳給組件，只接收一次，后續(xù)你換個(gè)函數(shù)給我我都不理會(huì)，也不會(huì)重新觸發(fā)渲染。在高階函數(shù)里面實(shí)現(xiàn)這個(gè)邏輯。