iT邦幫忙

signal相關文章
共有 65 則文章
鐵人賽 Modern Web DAY 20

技術 React 應用(VI):高頻陷阱與最佳實務(II)

快速導覽 上一篇,我們介紹了: 為什麼會 撕裂(tearing),如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 T...

鐵人賽 Modern Web DAY 19

技術 React 應用(V):高頻陷阱與最佳實務(I)

本篇目標 理解為什麼會 撕裂(tearing),如何保證 tear-free 訂閱 keys 重掛 下如何避免殘留訂閱 / 計算節點 在 Transitio...

鐵人賽 Modern Web DAY 18

技術 React 應用(IV):React 與 signals 怎麼互補

快速回顧 這篇接續上一篇的結尾,讓我們來透過實際的範例,理解要怎麼互補使用。 Effect 清理策略 首先,我們先來釐清主要的概念: 我們的 effect(c...

鐵人賽 Modern Web DAY 17

技術 React 應用(III):生命週期沒消失—副作用分工與清理時機

從未消失的生命週期 從本系列的開頭講解,一直到現在的實作,都是圍繞著「資料層的生命週期」:資料如何被讀取、失效、重算、與何時觸發副作用。 這並不衝突於框架本身的...

鐵人賽 Modern Web DAY 16

技術 React 應用(II):不撕裂的訂閱

本文目標 把前面實作過的 signals/computed 以 不撕裂(tear-free) 的方式接進 React 18 Concurrent 模式關鍵:快照...

鐵人賽 Modern Web DAY 15

技術 React 應用(I):渲染心智與限制

為什麼框架會影響你怎麼用 signals? 簡單回答就是 生命週期,但在脆上有批 React 仔永遠當它不存在的在賣課,確實也蠻擔心的,但你深入到一定的程度,就...

鐵人賽 Modern Web DAY 14

技術 實作 Batch & Transaction

前情提要 承接前面幾篇的內容(signal, effect, computed),我們把「副作用的執行時機」做得更可控: 多次 set 合併 → 同一輪只重跑...

鐵人賽 Modern Web DAY 13

技術 實作 Computed

回顧前情提要 graph.ts:Node{ kind, deps, subs }、link/unlink、withObserver/track(沿用實作 E...

鐵人賽 Modern Web DAY 12

技術 實作 effect (II): Effect 內部選型

快速回顧 還記得這張圖嗎?上一篇我們透過實作 Registry 這層抽象,讓我們能夠有不同資料結構處理 Effect 排程的選擇權,那你一定會想... 為什麼需...

鐵人賽 Modern Web DAY 11

技術 實作 effect (I): 讓圖真正「動」起來

引言 上一篇我們已經完成一個具備訂閱功能的 Signal 核心,這一篇我們來實作 Effect,讓每個依賴項都能自動去追蹤,順利讓原本靜態的圖能具有響應性的動起...

鐵人賽 Modern Web DAY 10

技術 建構基本的 Signal API

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

技術 Dependency Tracking 基本原理(II)

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

鐵人賽 Modern Web DAY 7

技術 Dependency Tracking 基本原理(I)

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

鐵人賽 Modern Web DAY 6

技術 理解 Signal 運作原理

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

鐵人賽 Modern Web DAY 5

技術 Signal 與 Proxy、Virtual DOM 的區別

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

技術 Reactivity 的概念與演進

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

鐵人賽 Modern Web DAY 2

技術 Signal 的核心概念

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

鐵人賽 Modern Web DAY 1

技術 什麼是 Signal ?

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

技術 取代 SKYPE,Signal 信號

我來推廣一套好了 Signal中文化很完整採用贊助制桌面版本手機版本都OK使用習慣跟LINE類似也就和 SKYPE 類似 還有訊息自動焚毀功能 https://...

技術 訊號 的 Local Change Detection

Change Detection 的歷史 Angular 團隊在企業應用程式的效能方面做出了許多改進。 組件中的 Change Detection 的預設值是C...

技術 計算訊號 - 快取錯誤 and Equal 函數不追蹤訊號

計算訊號快取錯誤 計算訊號中的錯誤快取是 Angular 19.1.2 中的新功能。當 equal 函數拋出錯誤時,計算訊號會快取該錯誤。當讀取該值時,計算訊號...

鐵人賽 JavaScript
Signal API in Angular 系列 第 44

技術 Day 44 - toSignal 函數的 manualCleanup

當 toSignal 函數在 root-level 服務中建立訊號並將其傳回給元件時,creation context 就是 root-level 服務。當元件...

鐵人賽 JavaScript
Signal API in Angular 系列 第 43

技術 Day 43 - toSignal 函數的初始值

Observable 是惰性的;因此,除非被訂閱,否則它不會發出值。另一方面,訊號始終具有值,包括 toSignal 函數建立的訊號。雖然 toSignal 函...

鐵人賽 JavaScript
Signal API in Angular 系列 第 42

技術 Day 42 - toSignal 函數中的相等性檢查

在 Angular 18 中,toSignal 函數新增了與訊號和計算函數相同的可選 equal 選項。 當省略 equal 選項時,將套用預設值 (===),...

鐵人賽 JavaScript
Signal API in Angular 系列 第 41

技術 Day 41 - 使用 AfterRenderEffect 生命週期鉤子進行反應式 DOM 讀寫

Introduction 在 Angular 19 中,實驗性生命週期鉤子 afterRenderEffect 允許開發人員更新 DOM。 與 afterNex...

鐵人賽 JavaScript
Signal API in Angular 系列 第 40

技術 Day 40 - 使用 Angular 原理圖從裝飾器遷移到函數

input()、output()、viewChild()、viewChildren()、contentChild()、contentChildren()、out...

鐵人賽 JavaScript
Signal API in Angular 系列 第 39

技術 Day 39 - 使用 Angular 19 中的 Resource API 進行資料檢索

Angular 團隊在 Angular 版本 19 中發布了 resource 和 rxResource 函數,以方便資料檢索。resource 的 loade...

鐵人賽 JavaScript
Signal API in Angular 系列 第 38

技術 Day 38 - 在 Angular 19 中重置或設定 LinkedSignal 中的值

Angular 19 中引入的新 LinkedSignal 功能透過允許訊號 (signal) 直接連結到來源值,提供了管理反應狀態 (reactive sta...