「ライフサイクルフック」なしで生きる

ほぼすべての 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 の宣言的な性質は、これらを冗長にすることを目的としていますが、一部の機能を意図した値で事前に設定することが不可能ではないにしても困難な場合があります (無効になっている ={()=>false}" を考えてください。期待どおりに行動してください)。

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

ただし、このアプローチには重要な問題があります。何か問題が発生した場合、イベント リスナーやその他のものが適切にクリーンアップされることを保証するのは困難です。もちろん、指定されたフレームワークはあらゆる 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 は、単なる仮想的なストリーム作成ユーティリティです。通常は、UI インタラクションを最適にモデル化するため、代わりに Promises、Observables の RxJS ストリームを使用することをお勧めします。

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

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

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

ちょっとしたエキゾチックな体験をする準備はできましたか? rimmel.js をチェックしてください

以上が「ライフサイクルフック」なしで生きるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。