幾乎每個 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 的聲明性質旨在使這些變得多餘，但有時很難甚至不可能用預期值預設某些功能（想想禁用=“$ {（）=> false}”，這不僅僅是表現得像人們所期望的）。

那我們做什麼呢？必須在初始化處理程序中設定我們剩下的所有內容。它有效，世界可以前進。

不過，這種方法有一個重要問題。如果出現問題，很難保證事件偵聽器和其他內容得到正確清理。給定的框架當然可以公開任何 onunmount 掛鉤，但如果應用程式邏輯中存在錯誤，那麼就會出現錯誤，或者最糟糕的是記憶體洩漏。

命令式程式設計是一種不幸的程式設計範例，它完全暴露在這些情況下。你幾乎可以做任何事情，包括破壞東西。

該解決方案附帶了控制反轉和函數式編程，這恰好不是 HTML 和 JavaScript 的構思方式，但有個好消息：我們仍然可以實現 FP 的一些基本設計模式並提供問題的戰略解決方案。

rimmel.js 是HTML 的概念性超集的參考實現，稱為Reactive Markup，其工作方式有點像JavaScript 的TypeScript，但它的目標是使HTML 和DOM 功能/功能反應。

這是透過將所有內容視為流來實現的：風格？這是一條溪流。 DOM 事件？當然，它們是流。 HTML 屬性？流也是如此。每當它們發出一個值時，它就被設定了。

讓我們看看它是如何運作的。

  const style = CreateStream({color: 'red'});
  const key = CreateStream('red', value);
  const handler = CreateStream();

  const template = rml`
    

    
  `;

CreateStream 只是一個假設的流創建實用程式。通常，您更願意使用 Promises、Observables RxJS 流，因為它們最好地模擬 UI 互動。

如果您再次檢查程式碼，您很快就會意識到沒有 onmount 呼叫。事實上，沒有必要這樣做，因為 onmount 回呼之前執行的每個操作現在都會在這些流發出後立即完成。

任何給定的框架或 UI 庫都將負責卸載模板中定義或綁定的每個流：樣式、資料鍵、onmouseover。不存在忘記清理的風險，並且記憶體洩漏的可能性大大降低。

如果您是函數式程式設計的新手，您可能會花一些時間來了解如何用流來重新表述您的問題，但是當您成功時，將會有更多的好處等著您，例如大大減少程式碼大小（程式碼減少50% 到90%），更具可測試性且不易出錯的邏輯和實作。

準備好享受異國情調的體驗了嗎？查看 rimmel.js