本文深入探討如何在Solid中使用信號，Solid是一個(gè)現(xiàn)代化的、響應(yīng)式的JavaScript庫，主要依靠組件構(gòu)建用戶界面。

內(nèi)容：

1. 信號簡介
   • 信號的應(yīng)用場景
2. 何為Solid？
3. 信號究竟是什麼？
4. 信號示例
5. Angular中的信號
6. Solid的其他特性

要點(diǎn)：

• 信號是Web開發(fā)的最新趨勢之一，它提供了一種響應(yīng)式方法來更新程序中易於變化的值。當(dāng)值更新時(shí)，所有使用該值的內(nèi)容也會(huì)更新，這使得信號獨(dú)一無二。它被用於Solid、Angular、Preact和Vue等庫中。
• Solid是由Ryan Carniato創(chuàng)建的響應(yīng)式框架，它使用信號創(chuàng)建細(xì)粒度的響應(yīng)性。它像Svelte一樣預(yù)編譯，這意味著需要交付的代碼更少。 Solid不使用虛擬DOM，組件只在首次渲染時(shí)調(diào)用一次。
• 信號是可以觀察到的值，具有初始值，並提供getter和setter方法，可用於查看或更新此值。當(dāng)信號的值發(fā)生變化時(shí)，它會(huì)發(fā)出一個(gè)信號，觸發(fā)一個(gè)反應(yīng)。這通常是對更新和渲染任何依賴於此值的組件的調(diào)用。
• 在Solid中，getter的行為類似於函數(shù)，這意味著它會(huì)自動(dòng)將該效果訂閱到信號。這確保了當(dāng)信號的值發(fā)生變化時(shí)，效果將使用新值運(yùn)行。這也意味著始終返回最新的當(dāng)前值。
• 除了信號之外，Solid還具有其他值得關(guān)注的特性。它在創(chuàng)建和更新內(nèi)容方面都非?？焖伲瑏K且具有與React類似的API。它為JSX添加了一些巧妙的特性，例如控制流，並開箱即用地支持服務(wù)器端渲染、水化和流式傳輸。

信號簡介

Web開發(fā)的最新趨勢之一是使用信號，它提供了一種更具響應(yīng)性的方法來更新程序中易於變化的值。當(dāng)值更新時(shí)，所有使用該值的內(nèi)容也會(huì)更新。這就是信號如此獨(dú)特的原因。

信號的增長及其關(guān)注度讓人聯(lián)想起2019年React 16.8版本發(fā)佈時(shí)引起的所有轟動(dòng)，當(dāng)時(shí)React團(tuán)隊(duì)引入了鉤子。鉤子的目標(biāo)是使?fàn)顟B(tài)更新（最終所有更新）更具函數(shù)式方法，並遠(yuǎn)離使用類。雖然信號看起來幾乎與鉤子相同，但它們之間存在一些細(xì)微的差別（我們在下面探討）。

信號的應(yīng)用場景

• Solid庫一直使用信號。
• Angular最近已將信號作為其檢測應(yīng)用程序中更改的主要方式。
• Preact最近引入了信號作為管理狀態(tài)的工具。
• Vue具有響應(yīng)式API，其中refs幾乎就是不同名稱下的信號。

何為Solid？

Solid（也稱為SolidJS）由Ryan Carniato於2016年創(chuàng)建，並於2018年發(fā)布。用他自己的話說，“它源於繼續(xù)使用我從Knockout.js中喜愛的細(xì)粒度反應(yīng)式模式的願(yuàn)望。”

他當(dāng)時(shí)不喜歡React和Vue等庫的發(fā)展方向，“只是更喜歡使用比組件更小、更獨(dú)立的基元所帶來的控制和可組合性?！彼慕鉀Q方案是創(chuàng)建Solid，這是一個(gè)使用信號創(chuàng)建細(xì)粒度響應(yīng)式（一種現(xiàn)在也可以在許多其他框架中看到的信號模式）的響應(yīng)式框架。

乍一看，Solid與帶有鉤子和函數(shù)式組件的React非常相似。在某些方面，這是正確的：它們在管理數(shù)據(jù)方面都具有相同的理念，如果我們已經(jīng)熟悉React，這使得學(xué)習(xí)Solid更容易。

但是，也有一些關(guān)鍵區(qū)別：

• Solid與Svelte類似，是預(yù)編譯的。這意味著性能提升已融入最終構(gòu)建中，因此需要交付的代碼更少。
• Solid不使用虛擬DOM，即使組件只是函數(shù)（如在React中），它們也只在首次渲染時(shí)調(diào)用一次。 （在React中，只要該組件有任何更新，它們就會(huì)被調(diào)用。）

信號究竟是什麼？

信號基於觀察者模式，這是經(jīng)典的四人幫設(shè)計(jì)模式之一。事實(shí)上，Knockout使用與信號非常相似的東西，稱為“可觀察對象”。

信號是響應(yīng)式應(yīng)用程序中最原子化的部分。它們是可以觀察到的值，具有初始值，並提供getter和setter方法，分別用於查看或更新此值。但是，為了充分利用信號，我們需要反應(yīng)，它們是訂閱信號並響應(yīng)值變化而運(yùn)行的效果。

當(dāng)信號的值發(fā)生變化時(shí)，它實(shí)際上會(huì)發(fā)出一個(gè)事件（或“信號”），然後觸發(fā)一個(gè)反應(yīng)（或“效果”）。這通常是對更新和渲染任何依賴於此值的組件的調(diào)用。這些組件被稱為訂閱信號。這意味著如果信號的值發(fā)生變化，只有這些組件才會(huì)更新。

Solid中的一個(gè)關(guān)鍵概念是一切都是一個(gè)效果，甚至是視圖渲染。每個(gè)信號都與它影響的特定組件緊密相連。這意味著，當(dāng)值發(fā)生變化時(shí)，可以以非常細(xì)粒度的方式重新渲染視圖，而無需昂貴的全頁面重新渲染。

信號示例

要在Solid中創(chuàng)建信號，我們需要使用createSignal函數(shù)並將兩個(gè)變量賦值給它的返回值，如下所示：

const [name, setName] = createSignal("Diana Prince");

這兩個(gè)變量代表getter和setter方法。在上面的示例中，name是getter，setName是setter。傳遞給createSignal的0值表示信號的初始值。

對於React開發(fā)人員來說，這當(dāng)然看起來很熟悉。使用React鉤子創(chuàng)建類似內(nèi)容的代碼如下所示：

const [name, setName] = useState("Diana Prince");

在React中，getter（name）的行為類似於變量，而setter（setName）是一個(gè)函數(shù)。

但是，即使它們看起來非常相似，主要區(qū)別在於name在React中表現(xiàn)得像一個(gè)變量，而在Solid中它是一個(gè)函數(shù)。

將name作為函數(shù)意味著，當(dāng)在效果內(nèi)部調(diào)用時(shí)，它會(huì)自動(dòng)將該效果訂閱到信號。這意味著，當(dāng)信號的值發(fā)生變化時(shí)，效果將使用新值運(yùn)行。

以下是一個(gè)使用name()信號的示例：

const [name, setName] = createSignal("Diana Prince");

createEffect函數(shù)可用於運(yùn)行基於任何信號值的效果，例如將值記錄到控制臺。它將訂閱函數(shù)內(nèi)部引用的任何信號。如果任何信號的值發(fā)生變化，則效果代碼將再次運(yùn)行。

在我們的示例中，如果我們使用setName setter函數(shù)更改name信號的值，我們可以看到效果代碼運(yùn)行並記錄新的名稱到控制臺：

const [name, setName] = useState("Diana Prince");

將getter作為函數(shù)也意味著始終返回最新的當(dāng)前值，而其他框架即使在值更新後也可能返回“陳舊”的值。它還意味著任何信號都可以輕鬆地綁定到計(jì)算值和記憶化：

createEffect(() => console.log(`Hello ${name()}`))

這將創(chuàng)建一個(gè)只讀信號，可以使用nameLength()訪問。它的值會(huì)響應(yīng)name信號值的任何更改而更新。

如果name()信號包含在組件中，則組件將自動(dòng)訂閱此信號，並在其值更改時(shí)重新渲染：

setName("Wonder Woman")

使用setName更新name信號的值將導(dǎo)致HelloComponent重新渲染。此外，HelloComponent函數(shù)只調(diào)用一次以創(chuàng)建相關(guān)的HTML。一旦它被調(diào)用，它就不需要再次運(yùn)行，即使name信號的值有任何更新。但是，在React中，組件函數(shù)在它們包含的值發(fā)生任何更改時(shí)都會(huì)被調(diào)用。

Solid的另一個(gè)主要區(qū)別是，儘管它使用JSX進(jìn)行視圖邏輯，但它根本不使用虛擬DOM。相反，它使用現(xiàn)代Vite構(gòu)建工具預(yù)先編譯代碼。這意味著需要交付的JavaScript更少，並且不需要實(shí)際的Solid庫與它一起交付（與Svelte非常相似）。視圖是用HTML構(gòu)建的。然後，使用模板文字系統(tǒng)來識別任何更改，然後執(zhí)行良好的舊式DOM操作，從而動(dòng)態(tài)進(jìn)行細(xì)粒度的更新。

這些對DOM特定區(qū)域的隔離和細(xì)粒度的更新與React在任何更改後完全重建虛擬DOM的方法大相徑庭。直接對DOM進(jìn)行更新減少了維護(hù)虛擬DOM的開銷，並使其速度異?？?。事實(shí)上，Solid在渲染速度方面有一些令人印象深刻的數(shù)據(jù)——僅次於原生JavaScript。

所有基準(zhǔn)測試都可以在這裡查看。

Angular中的信號

如前所述，Angular最近採用了信號來進(jìn)行細(xì)粒度的更新。它們的工作方式與Solid中的信號類似，但創(chuàng)建方式略有不同。

要?jiǎng)?chuàng)建信號，可以使用signal函數(shù)並將初始值作為參數(shù)傳遞：

const nameLength = createMemo(() => name().length)

然後可以將分配給信號的變量名稱（在上面的示例中為name）用作getter：

const [name, setName] = createSignal("Diana Prince");

該信號還具有一個(gè)set方法，可用於更新其值，如下所示：

const [name, setName] = useState("Diana Prince");

Angular中細(xì)粒度的更新方法與Solid中的方法幾乎相同。首先，Angular有一個(gè)update()方法，其作用類似於set，但派生值而不是替換值：

createEffect(() => console.log(`Hello ${name()}`))

這裡的唯一區(qū)別是將值（name）作為參數(shù)並對其執(zhí)行指令（.toUpperCase()）。當(dāng)getter被替換的最終值未知並且必須派生時(shí)，這非常有用。

其次，Angular還具有computed()函數(shù)，用於創(chuàng)建記憶化信號。它的工作方式與Solid的createMemo完全相同：

setName("Wonder Woman")

與Solid一樣，每當(dāng)檢測到計(jì)算函數(shù)中信號的值發(fā)生更改時(shí)，computed信號的值也會(huì)更改。

最後，Angular具有effect()函數(shù)，其作用與Solid中的createEffect()函數(shù)完全相同。每當(dāng)它依賴的值更新時(shí)，都會(huì)重新執(zhí)行副作用：

const nameLength = createMemo(() => name().length)

Solid的其他特性

並非只有信號才使Solid值得關(guān)注。正如我們已經(jīng)提到的，它在創(chuàng)建和更新內(nèi)容方面都非?？?。它還具有與React非常相似的API，因此對於以前使用過React的任何人來說，它都應(yīng)該很容易上手。但是，Solid在底層的工作方式非常不同，通常性能更高。

Solid的另一個(gè)不錯(cuò)的特性是它為JSX添加了一些巧妙的特性，例如控制流。它允許我們使用組件創(chuàng)建for循環(huán)，並且我們可以使用組件包含錯(cuò)誤。

此外，組件對於在通常流程之外顯示內(nèi)容（例如模態(tài)）也很方便。而嵌套反應(yīng)性意味著對值數(shù)組或?qū)ο蟮娜魏胃亩紝⒅匦落秩疽迅牡囊晥D部分，而不必重新渲染整個(gè)列表。 Solid使用Store使實(shí)現(xiàn)這一點(diǎn)更容易。 Solid還開箱即用地支持服務(wù)器端渲染、水化和流式傳輸。

對於任何想要嘗試Solid的人來說，Solid網(wǎng)站上有一個(gè)優(yōu)秀的入門教程，我們可以在Solid playground中試驗(yàn)代碼。

結(jié)論

在本文中，我們介紹了信號的概念以及它們在Solid和Angular中的使用方法。我們還研究了它們?nèi)绾螏椭鶶olid在無需虛擬DOM的情況下對DOM進(jìn)行細(xì)粒度的更新。許多框架現(xiàn)在都採用了信號範(fàn)例，因此它們絕對是我們應(yīng)該掌握的技巧！

關(guān)於JavaScript中信號的常見問題解答（FAQ）

JavaScript中的信號與傳統(tǒng)的事件處理有何主要區(qū)別？

JavaScript中的傳統(tǒng)事件處理涉及將事件偵聽器附加到DOM元素並響應(yīng)用戶交互或系統(tǒng)事件。但是，這種方法在大型應(yīng)用程序中可能會(huì)變得複雜且難以管理。另一方面，信號為響應(yīng)性提供了更細(xì)粒度的方法。它們允許您創(chuàng)建獨(dú)立的反應(yīng)行為單元，這些單元可以組合在一起以創(chuàng)建複雜的交互。與事件偵聽器不同，信號不與任何特定的DOM元素或事件類型綁定，這使得它們更靈活，並且更容易在應(yīng)用程序的不同部分重複使用。

JavaScript中信號的性能與其他反應(yīng)性模型相比如何？

信號的設(shè)計(jì)目的是高效且高性能。它們使用基於拉取的反應(yīng)性模型，這意味著它們只在需要時(shí)計(jì)算其值。這可以導(dǎo)致在具有復(fù)雜反應(yīng)行為的應(yīng)用程序中顯著提高性能，因?yàn)榭梢员苊獠槐匾挠?jì)算。但是，確切的性能差異將取決於具體的用例以及反應(yīng)性模型的優(yōu)化程度。

信號可以與其他JavaScript框架（如React或Vue）一起使用嗎？

是的，信號可以與其他JavaScript框架（如React或Vue）一起使用。它們可以集成到這些框架的反應(yīng)性系統(tǒng)中，以提供對反應(yīng)行為的額外靈活性和控制。但是，需要注意的是，每個(gè)框架都有自己處理反應(yīng)性的方式，因此您需要了解信號如何融入該模型。

如何調(diào)試使用信號的JavaScript應(yīng)用程序？

調(diào)試使用信號的JavaScript應(yīng)用程序可能與調(diào)試傳統(tǒng)的事件驅(qū)動(dòng)應(yīng)用程序略有不同。由於信號不與特定的事件或DOM元素綁定，因此您需要跟蹤數(shù)據(jù)在信號及其依賴項(xiàng)中的流動(dòng)。 Chrome DevTools等工具對此很有幫助，因?yàn)樗鼈冊试S您逐步執(zhí)行代碼並在每一步檢查信號的狀態(tài)。

使用JavaScript中的信號有哪些限製或缺點(diǎn)？

雖然信號提供了許多好處，但它們也有一些局限性。一個(gè)潛在的缺點(diǎn)是它們可能會(huì)使您的代碼更複雜，更難以理解，特別是對於不熟悉反應(yīng)性概念的開發(fā)人員而言。此外，由於信號是JavaScript中相對較新的概念，與更成熟的模式和框架相比，可用的資源和社區(qū)支持可能更少。

如何測試使用信號的JavaScript應(yīng)用程序？

可以使用與任何其他JavaScript應(yīng)用程序相同的技術(shù)來測試使用信號的JavaScript應(yīng)用程序。您可以使用單元測試來測試單個(gè)信號及其行為，並使用集成測試來測試信號如何相互交互以及與應(yīng)用程序的其他部分交互。 Jest或Mocha等工具可用於此目的。

信號可以在Node.js環(huán)境中使用嗎？

是的，信號可以在Node.js環(huán)境中使用。它們不與瀏覽器或DOM綁定，因此可以在任何JavaScript環(huán)境中使用。這使得它們成為在服務(wù)器端應(yīng)用程序中構(gòu)建反應(yīng)行為的強(qiáng)大工具。

如何處理使用信號的JavaScript應(yīng)用程序中的錯(cuò)誤？

處理使用信號的JavaScript應(yīng)用程序中的錯(cuò)誤的方法與任何其他JavaScript應(yīng)用程序類似。您可以使用try/catch塊來捕獲錯(cuò)誤並適當(dāng)?shù)靥幚硭鼈?。此外，您可以使用錯(cuò)誤信號來通過信號圖傳播錯(cuò)誤並在集中式方式處理它們。

信號可以用來構(gòu)建實(shí)時(shí)應(yīng)用程序嗎？

是的，信號可以用來構(gòu)建實(shí)時(shí)應(yīng)用程序。它們提供了一種強(qiáng)大的方法來管理和響應(yīng)實(shí)時(shí)數(shù)據(jù)更新，這使得它們成為聊天應(yīng)用程序、實(shí)時(shí)儀表板和多人遊戲等應(yīng)用程序的絕佳選擇。

如何優(yōu)化使用信號的JavaScript應(yīng)用程序的性能？

優(yōu)化使用信號的JavaScript應(yīng)用程序的性能涉及仔細(xì)管理信號依賴項(xiàng)並避免不必要的計(jì)算。您可以使用Chrome DevTools等工具來分析您的應(yīng)用程序並識別性能瓶頸。此外，您可以使用記憶化和延遲評估等技術(shù)來提高信號的性能。

以上是信號：JavaScript框架的細(xì)粒反應(yīng)性的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！