幾乎每個 JavaScript UI 庫 &/|我見過的框架有某種生命週期掛鉤：onmount、willmount、beforemount、aftermount、onunmount、onwhatever。
你真的需要它們嗎？它們是好是壞？沒有了還能活嗎？
那麼，首先為什麼會有這些存在？
const oninit = (e: Element) => {
e.style.prop = value;
e.addEventListener('mouseover', handler);
e.setAttribute('data-key', value);
}
這是許多網路元件附帶和使用的典型（無聊）初始化樣板。 HTML 和CSS 的聲明性本質旨在使這些變得多餘，但有時很難甚至不可能用預期值預設某些功能（想想禁用=“$ {（）=＆gt; false}”，它不會就像人們所期望的那樣行事）。
那我們做什麼呢？必須在初始化處理程序中設定我們剩下的所有內容。它有效，世界可以前進。
不過，這種方法有一個重要的問題。如果出現問題，很難保證事件偵聽器和其他內容得到正確清理。給定的框架當然可以公開任何 onunmount 鉤子，但如果應用程式邏輯中存在錯誤，那麼就會出現錯誤，或者最糟糕的是記憶體洩漏。
命令式程式設計是一種不幸的程式設計範例，它完全暴露在這些情況下。你幾乎可以做任何事情，包括破壞東西。
該解決方案附帶了控制反轉和函數式編程，這恰好不是 HTML 和 JavaScript 的構思方式，但有個好消息：我們仍然可以實現 FP 的一些基本設計模式並提供問題的戰略解決方案。
rimmel.js 是一個名為Reactive Markup 的HTML 概念性超集的參考實現，它的工作方式有點像JavaScript 的TypeScript，但它的目標是使HTML 和DOM 功能/功能反應。
這是透過將所有內容視為流來實現的：風格？這是一條溪流。 DOM 事件？當然，它們是流。 HTML 屬性？流也是如此。每當它們發出一個值時，它就被設定了。
讓我們看看它是如何運作的。
const style = CreateStream({color: 'red'});
const key = CreateStream('red', value);
const handler = CreateStream();
const template = rml`
<div style="${style}" data-key="${key}" onmouseover="${handler}">
</div>
`;
CreateStream 只是一個假設的流建立實用程式。通常，您更願意使用 Promises、Observables RxJS 流，因為它們最好地模擬 UI 互動。
如果你再檢查程式碼，你很快就會意識到沒有 onmount 呼叫。事實上，沒有必要這樣做，因為 onmount 回呼之前執行的每個操作現在都會在這些流發出後立即完成。
任何給定的框架或 UI 庫都將負責卸載模板中定義或綁定的每個流：樣式、資料鍵、onmouseover。不存在忘記清理的風險，並且記憶體洩漏的可能性大大降低。
如果您是函數式程式設計的新手，您可能會花一些時間來了解如何用流來重新表述您的問題，但是當您成功時，將會有更多的好處等著您，例如大大減少程式碼大小（程式碼減少50% 到90%），可測試性更高且不易出錯的邏輯和實作。
準備好享受異國情調的體驗了嗎？查看 rimmel.js
以上是沒有「生命週期掛鉤」的生活的詳細內容。更多資訊請關注PHP中文網其他相關文章！
