ソリッドJavaScriptライブラリの紹介

SOLIDJS：高性能レスポンシブJavaScript UIライブラリ

SOLIDは、仮想DOMを必要としないユーザーインターフェイスを作成するためのレスポンシブJavaScriptライブラリです。テンプレートを実際のDOMノードにコンパイルし、更新を細かい反応でラップするため、状態が更新されると、関連するコードのみが実行されます。

この方法により、コンパイラは初期レンダリングとランタイムの更新を最適化できます。このパフォーマンスに焦点を当てているため、最も高く評価されているJavaScriptフレームワークの1つになります。

私はこれに興味があり、試してみたいと思っていたので、このフレームワークがレンダリングコンポーネント、状態の更新、ストレージのセットアップなどを処理する方法を探求するために、小さなTo Doアプリケーションを作成するのにしばらく時間を費やしました。

最終的なコードと結果を見るのが待ちきれない場合は、最終デモをご覧ください。

クイックスタート

ほとんどのフレームワークと同様に、NPMパッケージをインストールすることから始めることができます。 JSXでフレームワークを使用するには、実行してください。

 npm solid-js babel-preset-solidをインストールします

次に、Babel-Preset-SolidをBabel、Webpack、またはロールアップ構成ファイルに追加する必要があります。

 「プリセット」：[「ソリッド」]

または、小さなアプリケーションをセットアップする場合は、テンプレートのいずれかを使用することもできます。

 ＃ソリッドテンプレートから小さなアプリケーションを作成しますnpx degit solidjs/テンプレート/js my-app

＃作成されたProject Directory CD My-Appに変更します

＃依存関係をインストールnpm i＃またはyarnまたはpnpm

＃開発サーバーnpm run devを起動します

タイプスクリプトがサポートされています。TypeScriptプロジェクトを開始する場合は、最初のコマンドをnpx degit solidjs/templates/ts my-appに変更します。

コンポーネントを作成およびレンダリングします

レンダリングコンポーネントの構文はReact.jsに似ているため、おなじみに見える場合があります。

 「solid-js/web」から{render}をインポートします。

const hellomessage = props =><div>こんにちは{props.name}</div> ;

与える（
  （）=><hellomessage name="Taylor"></hellomessage> 、
  document.getElementByID（ "Hello-Example"）
）;

最初にレンダリング関数をインポートし、次にテキストと小道具を備えたDIVを作成し、レンダリングを呼び出し、コンポーネントとコンテナ要素を渡す必要があります。

このコードは、実際のDOM式にコンパイルされます。たとえば、SOLIDでコンパイルされたら、上記のコードの例は次のようになります。

 {solid-js/web」から{render、template、insert、createcomponent}をインポートします。

const _tmpl $ = template（ `<div>こんにちは</div>`）;

const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode（true）;
  挿入（_el $、（）=> props.name）;
  _el $を返します。
};

与える（
  （）=> createComponent（hellomessage、{name： "Taylor"}）、
  document.getElementByID（ "Hello-Example"）
）;

ソリッドプレイグラウンドは非常に涼しく、ソリッドには、クライアント、サーバー、クライアントを含むさまざまなレンダリング方法があることを示しています。

信号を使用して、変化する値を追跡します

Solidは、 createSignalと呼ばれるフックを使用します。これは、ゲッターとセッターの2つの機能を返します。 React.jsのようなフレームワークを使用することに慣れている場合、これは少し奇妙に見えるかもしれません。通常、最初の要素が値そのものであることを期待しています。ただし、固体では、ゲッターを明示的に呼び出して、その変更を追跡するために、読み取り値がどこにあるかを傍受する必要があります。

たとえば、次のコードを書いている場合：

 const [todos、addtodos] = createsignal（[]）;

todos録音は、値ではなく関数を返します。値を使用したい場合は、 todos()などの関数を呼び出す必要があります。

小さなTo Doリストの場合、これは次のとおりです。

 "solid-js"から{createsignal}をimport;

const todolist =（）=> {
  入力します。
  const [todos、addtodos] = createsignal（[]）;

  const addtodo = value => {
    return addtodos（[... todos（）、value]）;
  };

  戻る （
    <h1 id="リストする">リストする：</h1>
    <input type="text" ref="{el"> 入力= el} />
    <button onclick="{()"> addtodo（input.value）}> itemを追加します</button>
    

{todos（）。map（item =>（
• {アイテム}
））}

）; };

上記のコードの例にはテキストフィールドが表示され、[プロジェクトの追加]ボタンをクリックした後、TODOSは新しいプロジェクトで更新され、リストに表示されます。

これは、 useStateを使用することと非常によく似ている可能性があるため、ゲッターを使用することの違いは何ですか？次のコードの例を考えてみましょう。

 console.log（ "信号の作成"）;
const [firstName、setFirstName] = createSignal（ "whitney"）;
const [lastname、setlastname] = createsignal（ "Houston"）;
const [displayfulname、setDisplayfullname] = createsignal（true）;

const displayname = creatememo（（）=> {
  if（！displayfulname（））return firstname（）;
  return `$ {firstName（）} $ {lastName（）}`;
}）;

createeffect（（）=> console.log（ "my name is"、displayname（）））;

console.log（ "set showfullname：false"）;
setDisplayfullname（false）;

console.log（ "lastnameを変更する"）;
setLastName（ "boop"）;

console.log（ "set showfullname：true"）;
setDisplayfullname（true）;

上記のコードを実行すると：

 <code>Create Signals My name is Whitney Houston Set showFullName: false My name is Whitney Change lastName Set showFullName: true My name is Whitney Boop</code>

注意すべき主なポイントは、新しいラスト名を設定した後、「私の名前は...」が記録されていないということです。これは、この時点でlastName()の変更を聞いているものは何もないためです。 displayFullName()の新しい値は、 displayName()の値が変更された場合にのみ設定されます。そのため、 setShowFullNameがTrueに設定されている場合、新しいラスト名が表示されていることがわかります。

これにより、値の更新を追跡するためのより安全な方法が提供されます。

レスポンシブプリミティブ

最後のコードの例では、 createSignalを導入しましたが、他にもいくつかのプリミティブがあります： createEffectとcreateMemo 。

createeffect

createEffect 、依存関係を追跡し、依存関係の各レンダリング後に実行されます。

 //最初に「solid-js」; 'から' import {createeffect}を使用してインポートすることを忘れないでください。 const [count、setCount] = createsignal（0）;

createeffect（（）=> {
  console.log（ "count is at"、count（））;
}）;

count()の値が変更されるたびに、「count is at ...」が記録されます

creatememo

createMemo 、実行されたコードの依存関係が更新されるたびに、その値を再計算する読み取り専用信号を作成します。いくつかの値をキャッシュし、それらを再評価せずに（依存関係が変わるまで）使用するときに使用できます。

たとえば、カウンターを100回表示し、ボタンをクリックしたときに値を更新する場合、 createMemoを使用すると、クリックごとに1回のみ再計算が行われます。

 function counter（）{
  const [count、setCount] = createsignal（0）;
  //それはCREATEMEMOラッピングカウンターを作成せずに100回呼び出されます// const counter =（）=> {
  // return count（）;
  //}

  // creatememoでカウンターをラッピングし、更新ごとに1回のみ呼び出しますconst counter = creatememo（（）=> count（））;

  戻る （
    <div>
      <button onclick="{()"> setCount（count（）1）}> count：{count（）}</button>
      <div>1。{counter（）}</div>
      <div>2。{counter（）}</div>
      <div>3。{counter（）}</div>
      <div>4。{counter（）}</div>
    </div>
  ）;
}

ライフサイクル方法

Solidは、 onMount 、 onCleanup 、 onErrorなど、いくつかのライフサイクル方法を公開します。最初のレンダリング後にいくつかのコードを実行したい場合は、 onMount使用する必要があります。

 //最初に「solid-js」; 'から' import {onmount}を使用してインポートすることを忘れないでください。 onmount（（）=> {
  console.log（ "I Mounted！"）;
}）;

onCleanup 、ReactのcomponentDidUnmountに似ています。これは、応答性のあるスコープの再計算のときに実行されます。

最新のサブスコープでエラーが発生したときにonErrorは実行されます。たとえば、データ取得が失敗した場合、使用できます。

ストレージ

データ用のストアを作成するために、SOLIDはcreateStoreを公開します。CreateStoreは、REATURE VALUEが読み取り専用のプロキシオブジェクトとセッター機能です。

たとえば、To Doの例を変更して状態ではなくストレージを使用すると、次のようになります。

 const [todos、addtodos] = createStore（{list：[]}）;

createeffect（（）=> {
  console.log（todos.list）;
}）;

onmount（（）=> {
  addTodos（ 'list'、（list）=> [... list、{item： "a new todo item"、完了：false}]）;
}）;

上記のコードの例は、最初に空の配列を使用してプロキシオブジェクトを記録し、次に{item: "a new todo item", completed: false}を含む配列でプロキシオブジェクトを記録します。

プロパティにアクセスされない場合、トップレベルの状態オブジェクトを追跡できないことに注意してください。そのため、 todos代わりにtodos.list記録します。

createEffectでtodosのみを記録する場合、リストの初期値が表示されますが、 onMountで更新された値は表示されません。

ストアの値を変更するには、 createStore使用するときに定義された設定関数を使用してそれらを更新できます。たとえば、To Doリスト項目を「完了」に更新する場合は、この方法でストレージを更新できます。

 const [todos、setodos] = createStore（{
  リスト：[{item： "new item"、完成：false}]
}）;

const markascomplete = text => {
  setodos（
    "リスト"、
    （i）=> i.item ===テキスト、
    「完了」、
    （c）=>！c
  ）;
};

戻る （
  <button onclick="{()"> MarkasComplete（ "new item"）}>完全なマーク</button>
）;

制御フロー

無駄にならないように、すべてのDOMノードは.map()などのメソッドを使用するときに更新されるたびに再現されます。固体により、テンプレートアシスタントを使用できます。

これらのいくつかは、プロジェクトをループするためFor 、条件付きの要素を表示および隠すためのShow 、特定の条件に一致する要素を表示するためのSwitchとMatchなど、利用可能です。

これらを使用する方法を示す例をいくつか紹介します。

<for each="{todos.list}" fallback="{<div">読み込み... }>
  {（item）=><div> {アイテム}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div">読み込み... }>
  <div>最初のアイテムが完成しました</div>
</show>
<switch fallback="{<div">アイテムはありません}>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>

デモプロジェクト

Solidの基本を簡単に紹介します。試してみたい場合は、下のボタンをクリックして、自動的に展開してGitHubにクローンを作成できるスタータープロジェクトを作成しました。

[Netlifyに展開されるボタンは、元のテキストに提供されていない、ここに挿入する必要があります]このプロジェクトには、Solidプロジェクトのデフォルト設定が含まれています。

このフレームワークは私がここでカバーしてきたものよりもはるかに多いので、詳細についてはドキュメントを自由にチェックしてください！

以上がソリッドJavaScriptライブラリの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。