UI 框架中的狀態管理

mstmahmuda11121

那麼，如果狀態發生變化，我們總是能夠直接知道哪些程式碼需要再次執行，不走彎路。這正是SolidJS所做的。 大量經濟實惠的網域後綴可供選擇 - 每月只需 0.08 歐元起， 立即開始網域檢查。 反應式基本構建塊 在開始描述表面之前，我們先來看看狀態的定義。在此，Solid 做出決定，必須在運行時容器中明確定義更改資料。例如，與 Svelte 不同的是，沒有黑盒編譯器來檢查表達式之間的依賴關係。 如果我們按照先前的 React 經驗，我們會預期控制台最初輸出 0，然後每秒計數到 3。但這並沒有發生！控制台上只出現 0，而 h1 元素從 0 開始，然後每秒數到 3。 讓我們再次思考上一章：Solid 希望我們使用createEffect明確標記依賴於訊號的程式碼！但是，我們的第一個console.log沒有生效，因此不會對更改做出反應。換句話說：實體元件的函數體僅被呼叫一次：在設定元件時。


如果我們現在看一下 TSX 部分，我們可以看到 Solid 仍然保持模板的精簡：TSX 中的動態表達式 沙烏地阿拉伯 電話號碼 被編譯器自動包裝到效果中。為了更好地理解該行為，讓我們來看看以下更簡單的範例：  在這裡，所有靜態 HTML 內容首先轉換為本機HTMLTemplateElement。這可以使用cloneNode函數非常有效地插入到DOM中，並且我們避免了多次處理靜態內容。 在元件內部，TSX 部分首先被打包成一個直接呼叫的函數（稱為IIFE），這樣我們寫的程式碼就不會被編譯器產生的變數污染。 接下來，克隆 HTML 模板並將其放入$el變數中。在這裡我們再次看到按鈕函數本身每個實例只能呼叫一次，否則每次呼叫都會建立一個新的 HTML 元素。該組件的整個動態部分由以下四行建構 首先定義事件監聽器。 Solid 使用稍微簡化的語法來做到這一點。該函式庫稍後會遍歷元素並將$$click分別轉換為叫。 然後訊號直接傳遞到插入函數。



在insert中，訊號的資料類型用於決定如何插入元素。在我們的簡單例子中，這裡發生的只是。因此，每當計數訊號發生變化時，我們的 HTML 元素的文字就會被交換。 在第三行中，必須在效果內更新元素的 ID，最後再傳回 HTML 元素。 總之，我們看到 Solid 每個實例只呼叫我們的元件一次，並隔離所有動態，以便訊號的任何變化都可以直接路由到效果，然後效果調整 DOM。 為了進一步內化這些概念，我們推薦網站上的官方互動式 SolidJS 教學。 指標和基準 到目前為止一切聽起來都很好。當然，如果沒有更多數據，我們就無法做出任何技術決策。以下是框架開發人員 Ryan Carniato精心整理的一些見解。讓我們從庫的 (Brotli) 壓縮檔案大小開始： 斯韋爾特 堅硬的 反應 1.85kb 3.86kb 36.22kb 在這裡我們已經可以看到庫的出發點是非常不同的。