隱藏的React組件，如何“關閉”監聽器/減少性能開銷？

Question

我們有一個要求，要求我們必須在網格中的多個位置渲染一個React組件的相同實例，並根據屏幕寬度顯示和隱藏這些組件。 例如，我們的產品模塊組件設置為顯示在移動設備上的位置3和台式機上的位置5。

引起的一個問題是性能，事實上我們將在頁面上擁有同一組件的多個實例（我們有6個斷點，因此最壞的情況是一個組件將在不同的位置呈現6次），所有這些都由偵聽器執行，等等。但實際上只有其中幾個可見。 有沒有一種方法可以使反應組件“休眠”，除非它實際上是可見的，從而減輕了頁面的負擔？

Answer 1

您可能需要在組件上放置一些條件渲染 。

從這里閱讀有關內容。