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

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

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

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

最終的なコードと結(jié)果を見(jiàn)るのが待ちきれない場(chǎng)合は、最終デモをご覧ください。

クイックスタート

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

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

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

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

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

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

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

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

＃開(kāi)発サーバーnpm run devを起動(dòng)します

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

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

レンダリングコンポーネントの構(gòu)文はReact.jsに似ているため、おなじみに見(jiàn)える場(chǎng)合があります。

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

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

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

最初にレンダリング関數(shù)をインポートし、次にテキストと小道具を備えた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"）
）;

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

信號(hào)を使用して、変化する値を追跡します

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

たとえば、次のコードを書(shū)いている場(chǎng)合：

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

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

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

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

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

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

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

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

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

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

 console.log（ "信號(hào)の作成"）;
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）;

上記のコードを?qū)g行すると：

 <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>

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

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

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

最後のコードの例では、 createSignalを?qū)毪筏蓼筏郡?、他にもいくつかのプリミティブがあります?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 、実行されたコードの依存関係が更新されるたびに、その値を再計(jì)算する読み取り専用信號(hào)を作成します。いくつかの値をキャッシュし、それらを再評(píng)価せずに（依存関係が変わるまで）使用するときに使用できます。

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

 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など、いくつかのライフサイクル方法を公開(kāi)します。最初のレンダリング後にいくつかのコードを?qū)g行したい場(chǎng)合は、 onMount使用する必要があります。

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

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

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

ストレージ

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

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

 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}を含む配列でプロキシオブジェクトを記録します。

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

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

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

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

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

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

制御フロー

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

これらのいくつかは、プロジェクトをループするため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の基本を簡(jiǎn)単に紹介します。試してみたい場(chǎng)合は、下のボタンをクリックして、自動(dòng)的に展開(kāi)してGitHubにクローンを作成できるスタータープロジェクトを作成しました。

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

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

以上がソリッドJavaScriptライブラリの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。