(譯) 關於 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 版。

繼續閱讀