反應，響應式引導行和列

Question

我有一個react組件，可以映射一些數據並顯示產品行。 我制作了一個映射函數，該函數還根據屏幕大小在前期對數據進行分塊，因此所有內容都可以放入一行，並且沒有浮點數和乘積大小略有不同的奇怪行為。 這是我現在所擁有的：

renderProducts() {
    if (this.props.display && this.props.display.productList && this.props.display.productList.hits) {
      const chunkedProducts = chunkProductsForWindow(this.props.display.productList.hits);

      return chunkedProducts.map((row) => (
        <div className="row">
          {
           row.map((product, index) => (
             <div className="col-xs-12 col-sm-6 col-md-3" key={index}>
              <h2>{product.product_name}</h2>
              <i>{product.product_name}</i>
              <p>${product.price}</p>
              <Link to={`/product/${product.product_id}`}>details</Link>
            </div>
           ))
         }
         </div>
      ));
    }
    return null;
  }

塊函數看起來像這樣：

 function chunkProductsForWindow(products) {
  let chunkSize;
  const windowSize = window.innerWidth;

  if (windowSize >= 992) {
    chunkSize = 4;
  } else if (windowSize < 992 && windowSize >= 768) {
    chunkSize = 2;
  } else {
    chunkSize = 1;
  }

  return _.chunk(products, chunkSize);
}

因此，當頁面加載時，這對我來說工作正常。 當您拖動頁面時，它變得很奇怪，因為當用戶更改屏幕尺寸時，沒有任何東西可以重新計算塊尺寸。 我試圖避免將監聽器放在窗口大小上，所以我想知道的是-有更好的方法來做到這一點，其中換行將根據屏幕大小而變化-越簡單越好。

當只是拖動屏幕尺寸時，沒有調用渲染，所以我認為我無法參與反應生命周期事件。 想知道是否有一個不需要屏幕大小偵聽器的更優雅的解決方案（嘗試使該應用程序保持性能最佳）。 謝謝閱讀！

編輯 -為清晰起見添加了代碼筆-https: //codepen.io/ajmajma/pen/RGmRXE

例如，從小窗口開始（如果需要，請刷新頁面，以便將初始塊大小讀取為1），然后將其拖動到大尺寸，您將看到產品保留在單行中。

Answer 1

是的，您必須收聽窗口調整大小才能觸發重新計算和重新渲染。 我會將chuckSize作為組件狀態。 但是不要在每個窗口調整大小回調上調用setState。 相反，只有在達到斷點時才調用setState。 您可以使窗口調整大小的回調節流閥以提高性能。

編輯由於以下評論之一，此答案被接受。 我復制粘貼以避免混淆...

但是在您的情況下，chunkProductsForWindow函數和引導網格正在執行相同的操作。 兩者都使其無響應。 您可以刪除chunkProductsForWindow，而只需讓網格完成其工作即可。 codepen codepen.io/anon/pen/dpEOoy