React JS Google Map使用限制

Question

我剛剛開始使用React JS，我目前正致力於獲取谷歌地圖「google-maps-react」軟件包並運行。

根據我對React JS的基本理解，任何更改都會導致整個組件層次結構重新呈現。

從我對Google使用信息的理解通過這個link;任何重新呈現構成用法。

問題 那麼，那麼，React JS開發人員如何處理\處理這個問題呢？ 25,000個免費的地圖渲染pre-React是相當實用的，但它看起來像一個相當簡單的上限，使用像React這樣的框架爆炸，導致您的層次結構中的任何更改都會重新渲染。

選項1 是保證地圖組件不嵌套在一個層次結構中的其他組件是可更新的最好方法？我編寫了一個示例應用程序，並確認只有調用該更改的層次結構中的組件纔會重新呈現。

如果這是最好的方式，那很好，但我希望能聽到更多有經驗的React開發人員。

感謝，

Answer 1

經過一番挖掘，我發現「谷歌地圖反應」NPM包在幕後做了一些有趣的事情。它實際上是發送更新到您的標記與最新的地圖狀態。

一旦我發現了這一點，我就會將這種行爲綁定在一起，現在我的地圖只渲染一次，並根據此行爲動態處理標記更改。

我無法在任何地方發現這種行爲，但偶然發現在我的標記內通過console.log（JSON.stringify（this.props））偶然發現此行爲。

Answer 2

我覺得25K的限制是指您在申請谷歌地圖JS SDK，而不是如何往往你實例化一個google.maps.Map對象。

是的，最好不要重新渲染封裝地圖的組件。

檢查這個簡單的地圖組件：

https://github.com/Scarysize/react-maps-popup/blob/master/src/map.js

這一次初始化地圖，使用函數作爲一個孩子的方法（OFC你可以簡單地傳遞一個回調爲道具）傳播地圖實例了。