# 掌握 Signals 就這麼簡單！ - Luciano (李胤銘)

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/98suSi3bRsr7CQUF7WB1Tp

> 開始做筆記

{%preview https://github.com/Luciano0322/signal-talk-2025 %}

## 連結
[IT邦文章：Reactivity 小技巧大變革：掌握 Signals 就這麼簡單！](https://ithelp.ithome.com.tw/users/20129020/ironman/8219)
[狀態管理工具 segnale-react](https://www.npmjs.com/package/segnale-react)
[個人 Medium](https://medium.com/@LeeLuciano)

## 目標

- 理解 signal 底層原理
- 帶著「我也能做一個框架」的信心離開

## React 核心假設

- 「資料變化是不可預測的」
- 在每次 state 改變的時候
- 建立新的 virtual DOM
- diff 新舊
- 更新 DOM

2012 缺乏觀察資料變化的方式，所以 virtual DOM 是個好方式
但現在？

- Virtual ＤＯＭ 讓 UI 一致性更高
- 但

如果每個資料都知道「誰在用他」
資料能直接觸發 UI 改變
那還需要 Virtual DOM 嗎

fine-grained Reactivity 的精神

## Signal 是資料流動的 graph

## React 如何處理 Component tree

rerender 是沿著樹 top-down 整個更新

## Signals Data Graph 的處理方式

不是「誰包誰」而是「誰用誰」
同步通知所有依賴的節點，無關的元件不受影響

## React vs Signals 核心差異

元件父子結構 <-> 狀態之間的依賴圖
top-down rerender <-> 資料主動通知

## Signal 的心智圖

Source A -> Computed C -> Effect D
Source B ->

## Auto-tracking：讓依賴自動連線

React 要寫 depen
Signal 自動追蹤 scope 內被讀取的值

## Fine-grained 的核心價值

- signal：最小可觀測單元，把要不要重算綁在值上
- Computed/Effect：

## Push & Pull

### Pull-based

客人主動詢問/店員被動、同步回應
function call 就是類似這樣

### Push-based

店員主動通知/客人立刻反應

### Push-Pull

- 求圖檔

## 核心流程：資料->衍生->副作用

react 18可以渲染過程被中斷

有混用的情況可以看it邦幫忙看

直接在component 直接訂閱signal

solid.js 是沒有virtal dom 的

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}