如何使用React或Angular創建僅在需要時加載的可重用畫廊

Question

我是一個自我學習者，這只是我無法解決的事情之一。 我對所有Web應用程序都使用nodejs，想知道react是否可以解決我面臨的問題。

問題：當您需要顯示一個展示多個圖像的彈出式圖庫時該怎么做。 但是，我們不需要每次加載頁面時都需要查看此畫廊，僅在使用單擊打開廚房按鈕時才需要。

一個類似的例子就是Airbnb在其列表頁面上所取得的成就： https : //www.airbnb.co.uk/rooms/432044

現在，當頁面首次呈現時，該頁面不會加載所有圖庫圖片。

但是，當您單擊查看照片時，它會打開圖庫，然后加載圖片，我注意到它的div包含data-reactroot。

他們在使用某種反應魔法嗎？ 還是棱角分明？

我非常希望能夠構建易於重用的組件，但更重要的是，我只想了解發生了什么，以便僅在打開照片時才加載圖庫內容。

如果有人可以在段落中進行總結，那么會發生什么，我敢肯定，我可以離開並學習復制它。 我只是不確定目前要復制的內容。

Answer 1

您可以使用React，只需要一個條件渲染。 基本上，您可以在組件的狀態中進行切換（一個簡單的布爾值）。 在父組件的渲染中，您可以看到以下內容：

render() {
    <div>
        ...
        { this.state.showPhotos ? <PhotoPopup /> : null }
        ...
    </div>
}

如果切換為false，則不會渲染該組件，因此不會加載它。 當他們單擊按鈕並更改狀態時，切換為true，這樣將渲染組件並將顯示照片彈出窗口（在此過程中加載照片）。

無論如何，這是在React中做到這一點的一種方法。 不要忘了處理照片的加載（即，有一些視覺指示表明正在加載照片）

Answer 2

基本方法是編寫一個小型React或Angular應用程序。 該應用程序的職責可能只是呈現一個“顯示照片”按鈕，然后在動態單擊該按鈕時將圖庫HTML添加到頁面中，從而觸發瀏覽器下載圖像。 該應用程序及其所有邏輯捆綁在一個JavaScript文件中。

閱讀React文檔，

https://facebook.github.io/react/docs/hello-world.html

然后從create-react-app開始。 這是Facebook推薦的構建簡單到中等復雜度應用程序的方法-這是您達到上述目標所需的全部。