用React寫函式元件，如何避免重複渲染？

場景：

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

當父元件更新時，onClick會被重新建立，由於函式跟常量不一樣，是一個引用，因此即使item用了React.memo包裹，也會認為props中傳過來的onClick是新建立的，導致所有item都會重新渲染。

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

問：這種情況我該如何優化我的元件設計呢

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

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

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

基於這個想法，我們還可以基於React.memo封裝一個高階函式，所有函式元件都用這個高階函式包裝。再定個規矩，所有以on開頭的回撥函式傳給元件，只接收一次，後續你換個函式給我我都不理會，也不會重新觸發渲染。在高階函式裡面實現這個邏輯。