信号：JavaScriptフレームワークの細粒反応性-jsチュートリアル-php.cn

Signals: Fine-grained Reactivity for JavaScript Frameworks

この記事では、主にユーザーインターフェイスを構築するコンポーネントに依存している最新のレスポンシブJavaScriptライブラリであるSolidで信号を使用する方法を詳細に調査します。

コンテンツ：

Angularの

キーポイント：

solidでは、ゲッターは関数のように動作します。つまり、信号への効果を自動的にサブスクライブすることを意味します。これにより、信号の値が変化すると、効果が新しい値で実行されることが保証されます。これは、常に最新の現在の値を返すことを意味します。
信号に加えて、Solidには注意を払う価値のある他の機能もあります。コンテンツの作成と更新が非常に高速で、反応する同様のAPIがあります。コントロールフローなど、いくつかの巧妙な機能をJSXに追加し、ボックスからのサーバー側のレンダリング、水分補給、ストリーミングをサポートします。

信号導入

Web開発における最新のトレンドの1つは、シグナルの使用です。これは、プログラムの値が簡単に変化する値を更新するためのより応答性の高い方法を提供します。値が更新されると、その値を使用するすべてのコンテンツも更新されます。そのため、信号はとてもユニークです。

信号の成長とその注意は、React 16.8がReactチームがフックを導入した2019年にリリース16.8がリリースされたときに引き起こされたすべての感覚を連想させます。フックの目標は、州の更新（最終的にはすべての更新）をより機能的な方法にし、クラスの使用から遠ざかることです。信号はフックとほぼ同じように見えますが、それらの間にはわずかな違いがあります（以下で探索します）。

信号アプリケーションシナリオ

ソリッドライブラリは常に信号を使用します。

Angularは最近、アプリケーションの変化を検出するための主要な方法として信号を使用しました。
PREACTは最近、状態を管理するためのツールとして信号を導入しました。
VueにはレスポンシブAPIがあり、refsは異なる名前でほぼ信号です。

しっかりしたものは何ですか？

Solid（SolidJSとも呼ばれる）は、2016年にRyan Carniatoによって設立され、2018年にリリースされました。彼自身の言葉では、「それは私がknockout.jsから好きなきめの細かい反応性パターンを使い続けたいという欲求に由来しています。」

>
彼は、ReactやVueなどのライブラリの開発の方向性を好まなかった信号を使用して細粒の応答性を作成するレスポンシブフレームワーク（他の多くのフレームワークでも見られる信号パターン）。

一見すると、固体はフックや機能的成分との反応に非常に似ています。いくつかの点で、これは真実です。データの管理に関しては、それらはすべて同じ哲学を持っています。
ただし、いくつかの重要な違いがあります：

固体はSvelteに似ており、事前にコンパイルされています。これは、パフォーマンスの改善が最終ビルドに組み込まれるため、配信するコードが少ないことを意味します。

SOLIDは仮想DOMを使用せず、コンポーネントが単なる機能（反応のように）であっても、最初のレンダリングで1回だけ呼び出されます。（反応では、コンポーネントの更新がある限り、それらは呼び出されます。）

信号とは正確には何ですか？
信号は、4つのデザインパターンの古典的なギャングの1つであるオブザーバーモードに基づいています。実際、ノックアウトは「観察可能なオブジェクト」と呼ばれる信号に非常によく似たものを使用します。

信号は、レスポンシブアプリケーションの最も原子的部分です。それらは観察可能な値であり、初期値を持ち、この値をそれぞれ表示または更新するためのゲッターとセッターの方法を提供します。ただし、信号を最大限に活用するには、
反応が必要です。これは、信号にサブスクライブし、値の変化に応じて実行する効果です。信号の値が変化すると、実際にイベント（または「信号」）を放出し、反応（または「効果」）をトリガーします。これは通常、この値に依存するコンポーネントを更新およびレンダリングするための呼び出しです。これらのコンポーネントは、
subscribe
信号と呼ばれます。これは、信号の値が変更された場合、これらのコンポーネントのみが更新されることを意味します。 SOLIDの重要な概念は、
すべてが効果であり、ビューレンダリングでさえも効果であるということです。各信号は、影響する特定のコンポーネントに密接にリンクされています。これは、値が変化すると、高価なフルページの再融資なしに、ビューを非常にきめ細かくする方法で視聴することができることを意味します。
シグナル例

これら2つの変数は、ゲッターとセッターのメソッドを表します。上記の例では、名前はgetterで、setNameはセッターです。 CreateSignalに渡された0値は、信号の初期値を示します。

これは確かに開発者を反応させるのに馴染みがあります。 Reactフックを使用して同様のコードを作成します。

const [name, setName] = createSignal("Diana Prince");

ログイン後にコピー

reactでは、getter（name）は変数のように動作しますが、セッター（setname）は関数です。

しかし、たとえそれらが非常に似ているとしても、主な違いは、名前が反応の変数のように動作することですが、それは堅実であるということです。

関数として名前を取ることは、効果内で呼び出された場合、効果を信号に自動的にサブスクライブすることを意味します。これは、信号の値が変化すると、効果が新しい値で実行されることを意味します。

以下は、名前（）信号を使用した例です。

const [name, setName] = createSignal("Diana Prince");

ログイン後にコピー

createeffect関数を使用して、コンソールの値を記録するなど、任意の信号値に基づいて効果を実行できます。関数内で参照される任意の信号を購読します。信号の値が変更された場合、効果コードは再び実行されます。

私たちの例では、SetName Setter関数を使用して名前信号の値を変更すると、エフェクトコードが実行され、新しい名前をコンソールに記録できます。

ゲッターを関数として取得することは、常に最新の現在の値を返すことを意味しますが、他のフレームワークは、値が更新された後でも「古い」値を返すことがあります。また、どの信号も計算された値に簡単にバインドし、記憶されることを意味します：

const [name, setName] = useState("Diana Prince");

ログイン後にコピー

これにより、namelength（）を使用してアクセスできる読み取り専用信号が作成されます。その値は、名前信号値の変更に応じて更新されます。

createEffect(() => console.log(`Hello ${name()}`))

ログイン後にコピー

name（）信号がコンポーネントに含まれている場合、コンポーネントはこの信号を自動的にサブスクライブし、値が変更されたときに再レンダリングします。

setNameを使用して名前信号の値を更新すると、HelloConentが再レンダリングされます。さらに、HelloComponent関数は、関連するHTMLを作成するために1回だけ呼び出されます。呼び出されると、名前信号の値の更新がある場合でも、再度実行する必要はありません。ただし、Reactでは、コンポーネント関数が含まれる値に変更が発生するたびに呼び出されます。

setName("Wonder Woman")

ログイン後にコピー

Solidのもう1つの大きな違いは、View LogicにJSXを使用しているが、仮想DOMをまったく使用しないことです。代わりに、最新のViteビルドツールを使用してコードを事前に描写します。これは、配信する必要のあるJavaScriptが少なく、実際のソリッドライブラリを配信する必要はないことを意味します（Svelteに非常に似ています）。ビューはHTMLに組み込まれています。次に、テンプレートテキストシステムを使用して変更を認識し、高齢のドン操作を実行して、細粒のアップデートを動的に実行します。

これらの分離とDOMの特定の領域への細かい更新は、変更後に仮想DOMを完全に再構築するためのReactのアプローチとは大きく異なります。 DOMへの直接更新は、仮想DOMを維持するオーバーヘッドを削減し、非常に高速にします。実際、Solidには、レンダリング速度の観点からいくつかの印象的なデータがあります。これは、ネイティブJavaScriptにのみ秒です。

すべてのベンチマークはここで見ることができます。

Angular < 前述のように、Angularは最近、きめ細かい更新のために信号を採用しました。それらは固体の信号と同様に機能しますが、わずかに異なる方法で作成されます。

信号を作成するには、信号関数を使用して、初期値をパラメーターとして渡すことができます。

信号に割り当てられた変数名（上記の例の名前）は、ゲッターとして使用できます。

const [name, setName] = createSignal("Diana Prince");

ログイン後にコピー

信号には、以下に示すようにその値を更新するために使用できる設定方法もあります。

const [name, setName] = useState("Diana Prince");

ログイン後にコピー

Angularの細粒の更新方法は、固体とほぼ同じです。まず、Angularにはセットと同様に機能するが、値を置き換える代わりに値を導出する更新（）メソッドがあります。

ここでの唯一の違いは、値（名前）をパラメーターとして取得し、その命令（.touppercase（））を実行することです。これは、交換されるゲッターの最終値が不明であり、導き出さなければならない場合に役立ちます。

createEffect(() => console.log(`Hello ${name()}`))

ログイン後にコピー

第二に、Angularには、記憶された信号を作成するためのComputed（）関数もあります。 Solidのcreatememo：

とまったく同じように機能します

固体と同様に、計算関数の信号の値の変化が検出されるたびに、計算された信号の値が変化します。

setName("Wonder Woman")

ログイン後にコピー

最後に、Angularには効果（）関数があります。これは、SOLIDでcreateeffect（）関数とまったく同じように機能します。それが依存する値が更新されるたびに、副作用が再実行されます：

const nameLength = createMemo(() => name().length)

ログイン後にコピー

ソリッドの他の機能

注意を払う価値があるのは信号だけではありません。すでに述べたように、コンテンツの作成と更新において非常に速いです。また、反応するのに非常によく似たAPIがあるため、以前にReactを使用したことがある人にとっては簡単に開始できるはずです。ただし、Solid Worksは、基礎となる層では非常に異なって機能し、一般的にパフォーマンスが向上します。

SOLIDのもう1つの優れた機能は、コントロールフローなど、JSXにいくつかの巧妙な機能を追加することです。

コンポーネントを使用してforループを作成することができ、エラーを含めるために

コンポーネントを使用できます。さらに、コンポーネントは、通常のプロセスの外側にコンテンツ（モダリティなど）を表示するのにも便利です。 Nested Reactive は、値配列またはオブジェクトの変更が、リスト全体を再レンダリングすることなく、Viewの変更部分を再レンダリングすることを意味します。 Solidはストアを使用してこれを簡単にします。 Solidは、箱からのサーバー側のレンダリング、水分補給、ストリーミングもサポートします。

Solidを試してみたい人のために、Solid Webサイトには、ソリッドプレイグラウンドでコードを試すことができる優れた入門チュートリアルがあります。

結論

この記事では、信号の概念と、それらが固体と角度でどのように使用されるかを紹介します。また、仮想DOMを必要とせずに、SOLIDがDOMに微調整された更新を実行するのにどのように役立つかについても検討しました。多くのフレームワークは現在、信号パラダイムを採用しているため、間違いなく私たちが習得すべきトリックです！

JavaScriptの信号上のFAQ JavaScriptのシグナルと従来のイベント処理の主な違いは何ですか？ JavaScriptでの従来のイベント処理には、イベントリスナーをDOM要素に添付し、ユーザーインタラクションまたはシステムイベントに応答することが含まれます。ただし、このアプローチは複雑になり、大規模なアプリケーションで管理が困難になる可能性があります。一方、信号は、応答性に対するより細かい粒状アプローチを提供します。それらを使用すると、複雑な相互作用を作成するために組み合わせることができる独立した反応性動作ユニットを作成できます。イベントリスナーとは異なり、信号は特定のDOM要素またはイベントタイプにバインドされていないため、アプリケーションのさまざまな部分でより柔軟で再利用しやすくなります。

JavaScriptの信号のパフォーマンスは、他の反応モデルと比較してどのように比較されますか？

信号は、効率的でパフォーマンスがあるように設計されています。彼らはプルベースの反応モデルを使用します。つまり、必要なときに値を計算することを意味します。これにより、不必要な計算を回避できるため、複雑な反応性挙動を備えたアプリケーションのパフォーマンスが大幅に向上する可能性があります。ただし、正確なパフォーマンスの違いは、特定のユースケースと反応モデルの最適化の程度に依存します。

信号は、ReactやVueなどの他のJavaScriptフレームワークで使用できますか？

はい、信号は、ReactやVueなどの他のJavaScriptフレームワークで使用できます。これらをこれらのフレームワークの反応システムに統合して、応答の動作をさらに柔軟に制御できます。ただし、各フレームワークには反応性を処理する独自の方法があることに注意することが重要です。したがって、信号がモデルにどのように適合するかを理解する必要があります。

信号を使用するJavaScriptアプリケーションをデバッグする方法は？

信号を使用するJavaScriptアプリケーションのデバッグは、従来のイベント駆動型アプリケーションのデバッグとはわずかに異なる場合があります。信号は特定のイベントまたはDOM要素にバインドされていないため、信号内のデータの流れとその依存関係を追跡する必要があります。 Chrome Devtoolsなどのツールは、コードを介して各ステップで信号のステータスを確認できるため、これに役立ちます。

JavaScriptで信号を使用することの制限または短所は何ですか？

シグナルは多くの利点を提供しますが、いくつかの制限もあります。潜在的な欠点の1つは、特に反応性の概念に精通していない開発者にとって、コードをより複雑で理解しにくいことです。さらに、信号はJavaScriptの比較的新しい概念であるため、より成熟したパターンやフレームワークよりもリソースとコミュニティのサポートが少ない場合があります。

信号を使用してJavaScriptアプリケーションをテストする方法は？

信号を使用したJavaScriptアプリケーションは、他のJavaScriptアプリケーションと同じ手法を使用してテストできます。ユニットテストを使用して個々の信号とその動作をテストし、統合テストを使用して、信号が相互に、アプリケーションの他の部分と相互作用する方法をテストできます。 JestやMochaなどのツールは、この目的に使用できます。

node.js環境で信号を使用できますか？

はい、信号はnode.js環境で使用できます。それらはブラウザまたはDOMにバインドされていないため、JavaScript環境で使用できます。これにより、サーバー側のアプリケーションでリアクティブな動作を構築するための強力なツールになります。

信号を使用するJavaScriptアプリケーションのエラーを処理する方法は？

信号を使用したJavaScriptアプリケーションのエラーを処理する方法は、他のJavaScriptアプリケーションと類似しています。トライ/キャッチブロックを使用してエラーをキャッチし、適切に処理できます。さらに、エラー信号を使用して、信号グラフを介してエラーを伝播し、集中的に処理できます。

信号を使用してリアルタイムアプリケーションを構築できますか？

はい、信号を使用してリアルタイムアプリケーションを構築できます。リアルタイムのデータアップデートを管理および応答する強力な方法を提供し、チャットアプリケーション、リアルタイムダッシュボード、マルチプレイヤーゲームなどのアプリケーションに最適な選択肢となります。

信号を使用してJavaScriptアプリケーションのパフォーマンスを最適化する方法は？

信号を使用するJavaScriptアプリケーションのパフォーマンスを最適化するには、信号依存関係を慎重に管理し、不必要な計算を回避します。 Chrome Devtoolsなどのツールを使用して、アプリケーションを分析し、パフォーマンスボトルネックを特定できます。さらに、メモリや遅延評価などの手法を使用して、信号のパフォーマンスを向上させることができます。

以上が信号：JavaScriptフレームワークの細粒反応性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。