React + Google Map 模仿 Airbnb 效果

如過您希望製作像 Airbnb 那樣自訂標記的樣式,動態顯示一些資訊並且當用戶和其互動時可以渲染自訂的 React 元件,那麼您來對地方了。

本範例嘗試使用 Google 官方的 React Wrapper 函式庫實作 Google Map 功能,目標為自訂 MapOverView 達成在 Map 上加入複雜的 Marker。 例如像 Airbnb 點擊房源時可以展開。這個範例我們會支援 Marker Clustering。

完整教學與範例請參考 Github

(譯) 關於 React 併發功能與 Suspense 您所需要了解的事

使用者介面(UI)是由許多不同“部分”組成,而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位(<input>),需要即時回應使用者的操作,而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。

在同步渲染的情況下,也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。

React 併發功能就是為了解耦/分離回應快和慢的介面,使渲染慢的部分在背景繼續執行而不阻塞較快的部分,達到每個部分可以各自回應使用者的操作。

併發渲染並不會讓應用程式提升效率變快,只是利用上敘分離的方式讓使用起來感覺體驗變快了。

本文將探討 React 併發功能(React Concurrent),了解其解決的問題以及如何利用。

繼續閱讀

使用 Callback Refs 取代 useEffect 避免問題產生

雖然 ref 是一個可變更 (mutable 物件在建立後可被修改) 的容器,我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:

1
2
3
const ref = React.useRef(null);

return <input ref={ref} defaultValue='Hello world' />;

ref 是一個內建的屬性,React 會在渲染後儲存 DOM 節點,當元件卸載後也會設為 null

繼續閱讀

[譯] React: 您可能不需要一個 Effect

Effect 是讓您可以脫離典型 React 設計模型的一個方式。它讓您可以跳脫到 React 之外並讓您的 React 元件同步外部系統,比如使用非 React 的套件,網路,瀏覽器 DOM 。假如沒有涉及外部,例如您想要在某些 propsstate 發生變更時更新元件的 state那麼您不應該使用 Effect。移除不必要的 Effect 可以讓您的程式碼更容易維護,執行效率更好,減少錯誤的產生。

本文您將學習

  • 為什麼以及如何移除不必要的 Effect
  • 如何快取耗費效能的計算而不使用 Effect
  • 如何重置和調整元件 State 而不使用 Effect
  • 如何在多個事件處理函式共享邏輯
  • 哪些邏輯應該移到事件處理函式中
  • 如何通知上層元件狀態變更
繼續閱讀

Inertia - Server-side Rendering (SSR) 以 React 為範例

本文為官方文件翻譯,如使用其他前端框架可參考官方

SSR 支援提前渲染造訪的頁面,並且回傳渲染的 HTML 到瀏覽器。這讓造訪者可以在資源完整載入之前看到並和頁面互動,另外提供的好處像是減少搜尋引擎分析建置索引的時間,優化 SEO。

繼續閱讀

[譯]React Server Component 如何運作深入解析

原文: How React server components work: an in-depth guide
推薦參考文章: React 新概念 — Server Components

React Server Component (RSC)是個令人激動的新功能,不久的將來將會產生很大的影響包括頁面載入效能,打包檔案大小,和開發 React 應用程式的方式。在 Plasmic 開發 Visual Builder for React 時,我們非常關心效能的問題 - 許多客戶建立了行銷和電商相關的網站。因此就算 RSC 還在實驗階段,我們也已經深入探究。在這篇文章,我們會分享目前的研究成果!

繼續閱讀

[譯] Remix 快速入門

我們廢話不多說直接進入程式碼的部分。如果您在找尋 15 分鐘快速實作,那本篇就是。

本篇會使用 TypeScript,但我們會在寫完程式之後才添加型別。這不是正常的流程,但因為部分讀者不使用 TypeScript 因此我們不想讓您混亂。一般來說我們應該在寫程式的時候就建立型別,才可以在一開始就享受 TypeScript 的好處。

繼續閱讀

Remix 潮什麼?

前言

本文只是快速看一下 Remix 的賣點,至於推不推暫時不好說,待筆者更深入研究分享,但..就目前官網提供的下面賣點,我是已經被點火了。

Remix 專注在網頁的基礎組成和 UX,更簡單的建置更棒的網站。

筆者:乍看之下,用不精準的感覺形容就是 Meteor 流星 React 版。

繼續閱讀