前情提要 走到這裡,這個關於 Signal 與 Fine-grained Reactivity 的系列文章,暫時告一個段落。這篇不談新的技術細節,而是一些我的心...
前情提要 在前幾篇,我們深入了 Scheduler 的基本運作、記憶體與圖管理、優先級與分層、以及 Time-Slicing 與協作式排程。這些都是讓 reac...
前情提要 在前一篇,我們介紹了 優先級與分層 Scheduler,解決了「重要任務先跑」的問題。然而,在實際應用中,我們還會遇到另一個挑戰:長任務會阻塞主執行緒...
前情提要 在前一篇,我們探討了 Scheduler 與圖 (Graph) 的關係,並處理了記憶體與依賴管理的挑戰。但在真實應用中,任務並不都是「同等級」的:...
前情提要 在前一篇中,我們已經理解了 Scheduler 的角色:負責在資料變動後,安排下游任務 (jobs) 進行批次更新。但若要讓這個系統長期穩定運作,「記...
前情提要 在前一篇原子交易(Atomic Transaction)中,我們已經看過交易如何確保狀態一致性。這一篇要更深入探討 Scheduler(調度器)的設計...
什麼是原子交易? 在開始前,先把 「原子交易(Atomic Transaction)」 說清楚: 「它是一個把多筆狀態更新包起來的保護殼,保證這段操作要嘛全部...
前言 前面已經示範了如何將我們設計好的 signal 機制,容入兩個主流框架下(React、Vue),這篇開始我們來回顧我們設計好的 signal 核心機制,探...
快速導覽 watch / watchEffect 與我們的 createEffect 怎麼分工 元件重掛(keys)下避免殘留訂閱/計算節點 非同步資料的兩...
快速回顧 在前面幾個章節中,我們完成了對 React 環境的整合應用,接者我們來嘗試導入 Vue 環境使用。 本篇目標 把我們的 signal / comput...
快速導覽 上一篇,我們介紹了: 為什麼會 撕裂(tearing),如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 T...
本篇目標 理解為什麼會 撕裂(tearing),如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 Transitio...
快速回顧 這篇接續上一篇的結尾,讓我們來透過實際的範例,理解要怎麼互補使用。 Effect 清理策略 首先,我們先來釐清主要的概念: 我們的 effect(c...
從未消失的生命週期 從本系列的開頭講解,一直到現在的實作,都是圍繞著「資料層的生命週期」:資料如何被讀取、失效、重算、與何時觸發副作用。 這並不衝突於框架本身的...
本文目標 把前面實作過的 signals/computed 以 不撕裂(tear-free) 的方式接進 React 18 Concurrent 模式關鍵:快照...
為什麼框架會影響你怎麼用 signals? 簡單回答就是 生命週期,但在脆上有批 React 仔永遠當它不存在的在賣課,確實也蠻擔心的,但你深入到一定的程度,就...
前情提要 承接前面幾篇的內容(signal, effect, computed),我們把「副作用的執行時機」做得更可控: 多次 set 合併 → 同一輪只重跑...
回顧前情提要 graph.ts:Node{ kind, deps, subs }、link/unlink、withObserver/track(沿用實作 E...
快速回顧 還記得這張圖嗎?上一篇我們透過實作 Registry 這層抽象,讓我們能夠有不同資料結構處理 Effect 排程的選擇權,那你一定會想... 為什麼需...
引言 上一篇我們已經完成一個具備訂閱功能的 Signal 核心,這一篇我們來實作 Effect,讓每個依賴項都能自動去追蹤,順利讓原本靜態的圖能具有響應性的動起...
引言 這篇會依照上一篇結尾的概念延續,基本上就是透過「閉包 + 解構賦值概念」,做出的狀態暫存機制,範例如下: export type Signal<T&...
為什麼需要這篇? 後面我們會用「閉包保存狀態」的方式來寫 signal(),並以「物件解構」來取值與改值(const { get, set } = signal...
引言 在上一篇中,我們拆解了 Dependency Tracking 的核心概念與執行原理,本篇將焦點放在 React 的 dependency 模型:它的特性...
什麼是 Dependency Tracking? Dependency Tracking(依賴追蹤)是一種用於自動收集並記錄資料間依賴關係的技術,能夠讓系統在資...
前言 有了前面幾篇的解釋,相信大家已經對 Signal 和 Fine-grained Reactivity 的概念有初步的認識,今天我們就回到開篇內容的主軸,接...
前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...
前情提要 接續前一篇的 Reactivity 核心概念講解內容,我們透過這一篇的內容帶大家釐清 Pull-based 與 Push-based 這兩個模式差異。...
承先啟後的發展 2010 年的 Knockout.js 首度將 Observable / Computed 帶進前端,讓「資料自己開口,UI 跟着動」成為可行路...
為何需要 Signal? 有了第一篇的概念之後,相信大家都已經在心中埋下懷疑的種子,那我們來重新審視一下 React 是怎麼處理 state 的吧! 相信大家對...
引言 React 的核心設計,是建立在一個重要假設之上:「資料與元件狀態的變化無法事先預測」。基於這個假設,React 必須持續透過 Virtual DOM(虛...