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

場景：

有一個自定義的item組件， 它的onClick方法是父組件透傳的。父組件中含有大量的item。

當父組件更新時，onClick會被重新創(chuàng)建，由于函數(shù)跟常量不一樣，是一個引用，因此即使item用了React.memo包裹，也會認為props中傳過來的onClick是新創(chuàng)建的，導致所有item都會重新渲染。

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

問：這種情況我該如何優(yōu)化我的組件設計呢

?

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

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

針對你上述具體問題，你可以在你的組件外面套一個React.memo，它有第二個參數(shù)，用來決定你傳入的props是否變化，具體用法看官方文檔。判斷的時候，你直接忽略onClick，因為大部分場景下回調函數(shù)都不會發(fā)生變化，誰會設計根據(jù)一個回調函數(shù)來重新渲染界面呢？除非要把函數(shù)的字符串顯示在界面上……這種場景沒見過。

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