認識 for await

首先,參考以下的實務範例:

1
2
3
4
5
6
7
8
9
10
11
async function main() {
const stream = await opeanai.chat.completions.create({
model: 'gpt-4',
messages: [
{ role: 'user', content: '測試回答' },
],
});
for await(const part of stream) {
process.stdout.write(part.choices[0]?.delta?.content || '');
}
}

這是一段 OpenAI Node SDK 的範例,使用 GPT-4 搭配串流的方式。

繼續閱讀

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
  • 如何在多個事件處理函式共享邏輯
  • 哪些邏輯應該移到事件處理函式中
  • 如何通知上層元件狀態變更
繼續閱讀

Laravel 如何在 Jetstream 或 Fortify 覆寫登入後導向

由於專案已經陸續採用 Laravel Jetstream 並且遇到一個需求; 根據使用的類型在登入時導向不同路由。想像一個情境,您有一般使用者和管理員,而管理員擁有後台功能。通常可能會需要將管理員導向後台介面。

使用 Laravel Jetstream 或 Fortify,要實作這個功能並不直覺,特別是使用兩階段驗證。

繼續閱讀

TinyMCE 6 處理圖片上傳, 整合 Laravel, React, TypeScript

若您只想參考如何快速整合 Laravel + TypeScript + TinyMCE 範例可直接至最下方該節。

TinyMCE 使用 Image Uploader 上傳編輯圖片。這讓 TinyMCE 支援了圖片編輯的功能。通過其他方式加入的本地圖片也使用這個功能上傳。例如使用 paste_data_images設定搭配拖拉圖片,或使用 PowerPaste 套件,TinyMCE 會自動更新 <img>src 屬性。

繼續閱讀

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 還在實驗階段,我們也已經深入探究。在這篇文章,我們會分享目前的研究成果!

繼續閱讀