Signal（信號(hào)）是一種存儲(chǔ)應(yīng)用狀態(tài)的形式，類似于 React 中的 ??useState()??。但是，有一些關(guān)鍵性差異使 Signal 更具優(yōu)勢(shì)。Vue、Preact、Solid 和 Qwik 等流行 JavaScript 框架都支持 Signal。

Signal 并不是最近才出現(xiàn)的，在此之前，它已經(jīng)存在于 Knockout 等框架中。不過(guò)，在最近幾年通過(guò)巧妙的編譯器技巧和與 JSX 的深度集成極大地改進(jìn)了它的開(kāi)發(fā)者體驗(yàn)·，這使得它非常簡(jiǎn)潔并且使用起來(lái)很方便。

下面就來(lái)看看 Signal 都有哪些優(yōu)勢(shì)，為什么說(shuō)它是前端框架的未來(lái)！

Signal 是什么？

Signal 和 State 之間的主要區(qū)別在于 Signal 返回一個(gè) getter 和一個(gè) setter，而非響應(yīng)式系統(tǒng)返回一個(gè)值和一個(gè) setter。

注意： 有些響應(yīng)式系統(tǒng)同時(shí)返回一個(gè) getter/setter，有些則返回兩個(gè)單獨(dú)的引用，但思想是一樣的。

Signal 的優(yōu)勢(shì)

State 混淆了兩個(gè)獨(dú)立的概念：

• StateReference：對(duì)狀態(tài)的引用。
• StateValue：存儲(chǔ)在狀態(tài)引用/存儲(chǔ)中的實(shí)際值。

那為什么返回一個(gè) getter 比返回一個(gè)值更好呢？因?yàn)橥ㄟ^(guò)返回 getter，可以將狀態(tài)引用的傳遞與狀態(tài)值的讀取分開(kāi)。

下面以這段 SolidJS 代碼為例：

• createSignal()：分配 StateStorage 并將其初始化為 0。
• getCount：可以傳遞的對(duì)狀態(tài)的引用。
• getCount()：獲取狀態(tài)值。

上面解釋了 Signal 和普通 State 的不同。那 Signal 到底有什么優(yōu)勢(shì)呢？Signal 是響應(yīng)式的，這意味著它需要跟蹤誰(shuí)對(duì)狀態(tài)感興趣（訂閱者），如果狀態(tài)發(fā)生變化，則通知訂閱者狀態(tài)變化。

為了具有響應(yīng)式，Signal 必須要收集誰(shuí)對(duì)它的值感興趣。它通過(guò)觀察在什么情況下調(diào)用狀態(tài) getter 來(lái)獲取此信息。通過(guò)從 getter 中獲取值，告訴 Signal 該位置對(duì)該值感興趣。如果值發(fā)生變化，則需要調(diào)用 getter 創(chuàng)建一個(gè)訂閱。

這就是為什么傳遞狀態(tài) getter 而不是狀態(tài)值很重要的原因。狀態(tài)值的傳遞不會(huì)向 Signal 提供有關(guān)實(shí)際使用該值的位置的任何信息。這就是為什么區(qū)分狀態(tài)引用和狀態(tài)值在 Signal 中如此重要。

為了進(jìn)行對(duì)比，這里是 Qwik 中的相同示例。請(qǐng)注意，(getter/setter) 已被替換為具有 .value 屬性（表示 getter/setter）的單個(gè)對(duì)象。雖然語(yǔ)法不同，但內(nèi)部的工作原理是一樣的。

當(dāng)單擊按鈕并增加值時(shí)，框架只需要將文本節(jié)點(diǎn)從 0 更新為 1。它可以這樣做是因?yàn)樵谀０宓某跏间秩酒陂g，Signal 已經(jīng)知道 count.value 只能被文本節(jié)點(diǎn)訪問(wèn)。因此，它知道如果 count 的值發(fā)生變化，就只需要更新文本節(jié)點(diǎn)而無(wú)需更新其他地方。

useState() 的缺點(diǎn)

下面來(lái)看看在 React 中是如何使用 useState() 的以及它的缺點(diǎn)。

React 的 useState() 會(huì)返回一個(gè)狀態(tài)值。這意味著 useState() 不知道組件或應(yīng)用內(nèi)部如何使用狀態(tài)值。所以，一旦通過(guò)調(diào)用 setCount() 通知 React 狀態(tài)更改，React 就不知道頁(yè)面的哪一部分發(fā)生了更改，因此必須重新渲染整個(gè)組件，這在計(jì)算上是很昂貴的。

useRef() 不渲染

React 的 useRef() 類似于 useSignal()，但它不會(huì)導(dǎo)致頁(yè)面重新渲染。下面的例子看起來(lái)與 useSignal() 非常相似，但它不起作用。

useRef() 的使用與 useSignal() 完全一樣，用于傳遞對(duì)狀態(tài)的引用而不是狀態(tài)本身。但是，useRef() 缺少了訂閱跟蹤和通知。

在基于 Signal 的框架中，useSignal() 和 useRef() 是一樣的。useSignal() 可以執(zhí)行 useRef() 加上訂閱跟蹤的功能，這樣就進(jìn)一步簡(jiǎn)化了框架的 API。

內(nèi)置的 useMemo()

Signal 很小需要進(jìn)行記憶，因?yàn)樗枰龅墓ぷ骱苌佟?/p>

下面來(lái)看一個(gè)包含兩個(gè)計(jì)數(shù)器和兩個(gè)子組件的例子：

這里只會(huì)更新兩個(gè) Display 組件之一的文本節(jié)點(diǎn)。未更新的文本節(jié)點(diǎn)在初始渲染后將永遠(yuǎn)不會(huì)打印。

# 初始渲染輸出
<Counter/>
<Display count={0}/>
<Display count={0}/>

# 單擊時(shí)的渲染
(空白)

實(shí)際上，我們無(wú)法在 React 中實(shí)現(xiàn)相同的效果，因?yàn)橹辽贂?huì)有一個(gè)組件需要重新渲染。那么下面就來(lái)看看如何在 React 中記憶組件以最小化重新渲染的次數(shù)。

但即使進(jìn)行了記憶，React 也會(huì)產(chǎn)生多次重新渲染：

# 初始渲染輸出
<Counter/>
<Display count={0}/>
<Display count={0}/>

# 單擊時(shí)的渲染
<Counter/>
<Display count={1}/>

如果沒(méi)有記憶，我們會(huì)看到：

# 初始渲染輸出
<Counter/>
<Display count={0}/>
<Display count={0}/>

# 單擊時(shí)的渲染
<Counter/>
<Display count={1}/>
<Display count={0}/>

這比 Signal 需要做的工作多得多。所以，這就是為什么 Signal 的工作就像把所有事情都記下來(lái)了，而不必由我們自己來(lái)記憶。

舉個(gè)例子

下面就來(lái)看一個(gè)實(shí)現(xiàn)購(gòu)物車的例子（React）：

APP 組件中定義了購(gòu)物車的狀態(tài) cart 以及兩個(gè)子組件：

• Main 組件：通過(guò)多層組件傳遞 setCart 函數(shù)，直到它到達(dá)購(gòu)買(mǎi)按鈕。
• NavBar 組件：通過(guò)多層組件傳遞購(gòu)物車狀態(tài)，直到它到達(dá)渲染購(gòu)物車的組件。

這里的問(wèn)題就是每次點(diǎn)擊購(gòu)買(mǎi)按鈕時(shí)，大部分組件樹(shù)都必須重新渲染。這會(huì)導(dǎo)致類似于的輸出：

# 點(diǎn)擊購(gòu)買(mǎi)按鈕時(shí)
<App/>
<Main/>
<Product/>
<NavBar/>
<Cart/>

如果使用記憶，那么就可以避免 Main 組件重新渲染，而只有 NavBar 組件重新渲染：

# 點(diǎn)擊購(gòu)買(mǎi)按鈕時(shí)
<App/>
<NavBar/>
<Cart/>

如果使用 Signal，輸出是這樣的：

# 點(diǎn)擊購(gòu)買(mǎi)按鈕時(shí)
<Cart/>

這大大減少了需要執(zhí)行的代碼量。

總結(jié)

Signal 是在應(yīng)用中存儲(chǔ)狀態(tài)的一種方式，類似于 React 中的 useState()。兩者的關(guān)鍵區(qū)別在于，Signal 返回一個(gè) getter 和一個(gè) setter，而非響應(yīng)式系統(tǒng)只返回一個(gè)值和一個(gè) setter。

Signal 是響應(yīng)式的，這意味著它需要跟蹤誰(shuí)對(duì)狀態(tài)感興趣并通知訂閱者狀態(tài)更改。這是通過(guò)觀察調(diào)用狀態(tài) getter 的上下文來(lái)實(shí)現(xiàn)的，它創(chuàng)建了一個(gè)訂閱。

相比之下，React 中的 useState() 僅返回狀態(tài)值，這意味著它不知道如何使用狀態(tài)值，并且必須重新渲染整個(gè)組件樹(shù)以響應(yīng)狀態(tài)變化。

所以說(shuō) Signal 是前端框架的未來(lái)！