使用者介面(UI)是由許多不同“部分”組成,而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位(<input>
),需要即時回應使用者的操作,而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。
在同步渲染的情況下,也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。
React 併發功能就是為了解耦/分離回應快和慢的介面,使渲染慢的部分在背景繼續執行而不阻塞較快的部分,達到每個部分可以各自回應使用者的操作。
併發渲染並不會讓應用程式提升效率變快,只是利用上敘分離的方式讓使用起來感覺體驗變快了。
本文將探討 React 併發功能(React Concurrent),了解其解決的問題以及如何利用。
本文的核心為將 Next.js 部署至 Google Cloud Run,CI 的部分會使用 Gitlab CI,主要會依據採用不同服務分成兩種流程:
本文希望可以儘量補充其他教學遺失的環節,幫助您可以自行選擇想用的服務調整流程。
[toc]
雖然 ref
是一個可變更 (mutable 物件在建立後可被修改) 的容器,我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:
1 | const ref = React.useRef(null); |
ref
是一個內建的屬性,React 會在渲染後儲存 DOM 節點,當元件卸載後也會設為 null
。
Effect 是讓您可以脫離典型 React 設計模型的一個方式。它讓您可以跳脫到 React 之外並讓您的 React 元件同步外部系統,比如使用非 React 的套件,網路,瀏覽器 DOM 。假如沒有涉及外部,例如您想要在某些 props
或 state
發生變更時更新元件的 state
,那麼您不應該使用 Effect。移除不必要的 Effect 可以讓您的程式碼更容易維護,執行效率更好,減少錯誤的產生。
本文您將學習
- 為什麼以及如何移除不必要的 Effect
- 如何快取耗費效能的計算而不使用 Effect
- 如何重置和調整元件 State 而不使用 Effect
- 如何在多個事件處理函式共享邏輯
- 哪些邏輯應該移到事件處理函式中
- 如何通知上層元件狀態變更
由於專案已經陸續採用 Laravel Jetstream 並且遇到一個需求; 根據使用的類型在登入時導向不同路由。想像一個情境,您有一般使用者和管理員,而管理員擁有後台功能。通常可能會需要將管理員導向後台介面。
使用 Laravel Jetstream 或 Fortify,要實作這個功能並不直覺,特別是使用兩階段驗證。
若您只想參考如何快速整合 Laravel + TypeScript + TinyMCE 範例可直接至最下方該節。
TinyMCE 使用 Image Uploader 上傳編輯圖片。這讓 TinyMCE 支援了圖片編輯的功能。通過其他方式加入的本地圖片也使用這個功能上傳。例如使用 paste_data_images設定搭配拖拉圖片,或使用 PowerPaste 套件,TinyMCE 會自動更新 <img>
的 src
屬性。
本文為官方文件翻譯,如使用其他前端框架可參考官方
SSR 支援提前渲染造訪的頁面,並且回傳渲染的 HTML 到瀏覽器。這讓造訪者可以在資源完整載入之前看到並和頁面互動,另外提供的好處像是減少搜尋引擎分析建置索引的時間,優化 SEO。