几乎每个 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