React 的核心設計前提是建立在一個重要假設之上:『資料與元件狀態的變化無法事先預測』。基於此假設,React 必須持續透過 Virtual DOM 的機制,來比對新舊 UI 狀態之間的差異,藉此決定哪些地方需要重新渲染,這個假設帶來了額外的效能成本與複雜度。
但如果,我們推翻這固有的假設呢?如果資料的變化本來就可以精確地被觀測和追蹤,我們還需要使用 V-DOM 進行比對?這就是 Signal 提出的新視角:資料本身具備觀測性,我們可以透過精細的 side effects 直接處理相關 UI 變動,跳脫 V-DOM 的限制。在此系列文章中,我將帶你一步一步認識 Signal 的核心概念。
引言 React 的核心設計,是建立在一個重要假設之上:「資料與元件狀態的變化無法事先預測」。基於這個假設,React 必須持續透過 Virtual DOM(虛...
為何需要 Signal? 有了第一篇的概念之後,相信大家都已經在心中埋下懷疑的種子,那我們來重新審視一下 React 是怎麼處理 state 的吧! 相信大家對...
承先啟後的發展 2010 年的 Knockout.js 首度將 Observable / Computed 帶進前端,讓「資料自己開口,UI 跟着動」成為可行路...
前情提要 接續前一篇的 Reactivity 核心概念講解內容,我們透過這一篇的內容帶大家釐清 Pull-based 與 Push-based 這兩個模式差異。...
前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...
前言 有了前面幾篇的解釋,相信大家已經對 Signal 和 Fine-grained Reactivity 的概念有初步的認識,今天我們就回到開篇內容的主軸,接...
什麼是 Dependency Tracking? Dependency Tracking(依賴追蹤)是一種用於自動收集並記錄資料間依賴關係的技術,能夠讓系統在資...
引言 在上一篇中,我們拆解了 Dependency Tracking 的核心概念與執行原理,本篇將焦點放在 React 的 dependency 模型:它的特性...
為什麼需要這篇? 後面我們會用「閉包保存狀態」的方式來寫 signal(),並以「物件解構」來取值與改值(const { get, set } = signal...
引言 這篇會依照上一篇結尾的概念延續,基本上就是透過「閉包 + 解構賦值概念」,做出的狀態暫存機制,範例如下: export type Signal<T&...