ほぼすべての 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);
  }

これは、Web の多くのコンポーネントに付属し、使用されている典型的な (退屈な) 初期化ボイラープレートです。 HTML と CSS の宣言的な性質は、これらを冗長にすることを目的としていますが、一部の機能を意図した値で事前に設定することが不可能ではないにしても困難な場合を除きます (disabled="${()=>false}" を考えてください。期待どおりに動作します)。

それで、私たちは何をしますか？ init ハンドラーに残っているものを命令的に設定します。それが機能すれば、世界は前進することができます。

ただし、このアプローチには重要な問題があります。何か問題が発生した場合、イベント リスナーやその他のものが適切にクリーンアップされることを保証するのは困難です。もちろん、指定されたフレームワークはあらゆる onunmount フックを公開できますが、アプリケーション ロジックにエラーがある場合は、バグ、または最悪の場合、メモリ リークが発生します。

命令型プログラミングは、こうした状況に完全にさらされる残念なプログラミング パラダイムです。破壊も含めて、ほぼすべてのことができます。

この解決策には、制御と関数型プログラミングの反転が付属しています。これは、HTML と JavaScript が考案された方法ではありませんでしたが、良いニュースがあります。FP の基本的なデザイン パターンの一部をまだ実装でき、次のような機能を提供できます。問題に対する戦略的な解決策。

rimmel.js は、Reactive Markup と呼ばれる HTML の 概念的 スーパーセットのリファレンス実装です。これは JavaScript の TypeScript に少し似ていますが、HTML と DOM を機能的/機能的にリアクティブにすることを目的としています。

これは、すべてをストリームとして扱うことで実現されます: style?それはストリームです。 DOMイベント?もちろんそれらはストリームです。 HTML属性？ストリームも。値を発行すると、それが設定されます。

それがどのように機能するかを見てみましょう。

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

  const template = rml`
    

    
  `;

CreateStream は、単なる仮想的なストリーム作成ユーティリティです。通常は、UI インタラクションを最適にモデル化するため、代わりに Promises、Observables の RxJS ストリームを使用することをお勧めします。

コードをもう一度チェックすると、onmount 呼び出しがないことがすぐにわかります。実際、onmount コールバックが以前に実行していたすべての操作は、ストリームが出力されるとすぐに実行されるため、その必要はありません。

任意のフレームワークまたは UI ライブラリは、テンプレート内で定義またはバインドされているすべての単一ストリーム (style、data-key、onmouseover) のアンマウントを担当します。クリーンアップを忘れるリスクはなく、メモリ リークが発生する可能性は大幅に減少します。

関数型プログラミングに慣れていない場合は、ストリームの観点から問題を再定式化する方法を理解するのに時間を費やすことになるでしょう。しかし、それができるようになれば、それと引き換えに、大幅にコストが削減されるなど、さらに多くのメリットが待っているでしょう。コード サイズ (コードが 50% ～ 90% 減少)、テストしやすくなり、エラーが発生しにくくなるロジックと実装。

ちょっとしたエキゾチックな体験をしてみませんか?リンメル.js