几乎每个 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中文网其他相关文章！
