iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

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

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

參賽天數 10 天 | 共 10 篇文章 | 16 人訂閱 訂閱系列文 RSS系列文
DAY 1

什麼是 Signal ?

引言 React 的核心設計,是建立在一個重要假設之上:「資料與元件狀態的變化無法事先預測」。基於這個假設,React 必須持續透過 Virtual DOM(虛...

2025-09-01 ‧ 由 LucianoLee 分享
DAY 2

Signal 的核心概念

為何需要 Signal? 有了第一篇的概念之後,相信大家都已經在心中埋下懷疑的種子,那我們來重新審視一下 React 是怎麼處理 state 的吧! 相信大家對...

2025-09-02 ‧ 由 LucianoLee 分享
DAY 3

Reactivity 的概念與演進

承先啟後的發展 2010 年的 Knockout.js 首度將 Observable / Computed 帶進前端,讓「資料自己開口,UI 跟着動」成為可行路...

2025-09-03 ‧ 由 LucianoLee 分享
DAY 4

Reactivity 兩大驅動模式: Pull-based vs. Push-based

前情提要 接續前一篇的 Reactivity 核心概念講解內容,我們透過這一篇的內容帶大家釐清 Pull-based 與 Push-based 這兩個模式差異。...

2025-09-04 ‧ 由 LucianoLee 分享
DAY 5

Signal 與 Proxy、Virtual DOM 的區別

前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...

2025-09-05 ‧ 由 LucianoLee 分享
DAY 6

理解 Signal 運作原理

前言 有了前面幾篇的解釋,相信大家已經對 Signal 和 Fine-grained Reactivity 的概念有初步的認識,今天我們就回到開篇內容的主軸,接...

2025-09-06 ‧ 由 LucianoLee 分享
DAY 7

Dependency Tracking 基本原理(I)

什麼是 Dependency Tracking? Dependency Tracking(依賴追蹤)是一種用於自動收集並記錄資料間依賴關係的技術,能夠讓系統在資...

2025-09-07 ‧ 由 LucianoLee 分享
DAY 8

Dependency Tracking 基本原理(II)

引言 在上一篇中,我們拆解了 Dependency Tracking 的核心概念與執行原理,本篇將焦點放在 React 的 dependency 模型:它的特性...

2025-09-08 ‧ 由 LucianoLee 分享
DAY 9

實作 Signal 前你需要的兩個 JS 基礎觀念

為什麼需要這篇? 後面我們會用「閉包保存狀態」的方式來寫 signal(),並以「物件解構」來取值與改值(const { get, set } = signal...

2025-09-09 ‧ 由 LucianoLee 分享
DAY 10

建構基本的 Signal API

引言 這篇會依照上一篇結尾的概念延續,基本上就是透過「閉包 + 解構賦值概念」,做出的狀態暫存機制,範例如下: export type Signal<T&...

2025-09-10 ‧ 由 LucianoLee 分享