iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

Reactivity 小技巧大變革:掌握 Signals 就這麼簡單! 系列

React 的核心設計前提是建立在一個重要假設之上:『資料與元件狀態的變化無法事先預測』。基於此假設,React 必須持續透過 Virtual DOM 的機制,來比對新舊 UI 狀態之間的差異,藉此決定哪些地方需要重新渲染,這個假設帶來了額外的效能成本與複雜度。
但如果,我們推翻這固有的假設呢?如果資料的變化本來就可以精確地被觀測和追蹤,我們還需要使用 V-DOM 進行比對?這就是 Signal 提出的新視角:資料本身具備觀測性,我們可以透過精細的 side effects 直接處理相關 UI 變動,跳脫 V-DOM 的限制。在此系列文章中,我將帶你一步一步認識 Signal 的核心概念。

鐵人鍊成 | 共 30 篇文章 | 29 人訂閱 訂閱系列文 RSS系列文
DAY 21

Vue 應用 (I):最小橋接器與用法

快速回顧 在前面幾個章節中,我們完成了對 React 環境的整合應用,接者我們來嘗試導入 Vue 環境使用。 本篇目標 把我們的 signal / comput...

2025-09-21 ‧ 由 LucianoLee 分享
DAY 22

Vue 應用 (II):交互操作與進階議題

快速導覽 watch / watchEffect 與我們的 createEffect 怎麼分工 元件重掛(keys)下避免殘留訂閱/計算節點 非同步資料的兩...

2025-09-22 ‧ 由 LucianoLee 分享
DAY 23

進階內核(I):Async Transaction 實作

前言 前面已經示範了如何將我們設計好的 signal 機制,容入兩個主流框架下(React、Vue),這篇開始我們來回顧我們設計好的 signal 核心機制,探...

2025-09-23 ‧ 由 LucianoLee 分享
DAY 24

進階內核(II):原子交易

什麼是原子交易? 在開始前,先把 「原子交易(Atomic Transaction)」 說清楚: 「它是一個把多筆狀態更新包起來的保護殼,保證這段操作要嘛全部...

2025-09-24 ‧ 由 LucianoLee 分享
DAY 25

進階內核(III):Scheduler 進階

前情提要 在前一篇原子交易(Atomic Transaction)中,我們已經看過交易如何確保狀態一致性。這一篇要更深入探討 Scheduler(調度器)的設計...

2025-09-25 ‧ 由 LucianoLee 分享
DAY 26

進階內核(IV):記憶體與圖管理

前情提要 在前一篇中,我們已經理解了 Scheduler 的角色:負責在資料變動後,安排下游任務 (jobs) 進行批次更新。但若要讓這個系統長期穩定運作,「記...

2025-09-26 ‧ 由 LucianoLee 分享
DAY 27

進階內核(V):優先級與分層 Scheduler

前情提要 在前一篇,我們探討了 Scheduler 與圖 (Graph) 的關係,並處理了記憶體與依賴管理的挑戰。但在真實應用中,任務並不都是「同等級」的:...

2025-09-27 ‧ 由 LucianoLee 分享
DAY 28

進階內核(VI):Time-Slicing 與協作式排程

前情提要 在前一篇,我們介紹了 優先級與分層 Scheduler,解決了「重要任務先跑」的問題。然而,在實際應用中,我們還會遇到另一個挑戰:長任務會阻塞主執行緒...

2025-09-28 ‧ 由 LucianoLee 分享
DAY 29

進階內核(VII):DevTools 與診斷

前情提要 在前幾篇,我們深入了 Scheduler 的基本運作、記憶體與圖管理、優先級與分層、以及 Time-Slicing 與協作式排程。這些都是讓 reac...

2025-09-29 ‧ 由 LucianoLee 分享
DAY 30

心得與觀點

前情提要 走到這裡,這個關於 Signal 與 Fine-grained Reactivity 的系列文章,暫時告一個段落。這篇不談新的技術細節,而是一些我的心...

2025-09-30 ‧ 由 LucianoLee 分享