SolidJS：一款高性能的響應(yīng)式JavaScript UI庫

Solid是一個用於創(chuàng)建用戶界面的響應(yīng)式JavaScript庫，它無需虛擬DOM。它將模板編譯成真正的DOM節(jié)點，並將更新包裝在細(xì)粒度的反應(yīng)中，因此當(dāng)狀態(tài)更新時，只有相關(guān)的代碼才會運行。

這種方式使得編譯器可以優(yōu)化初始渲染，運行時可以優(yōu)化更新。這種對性能的關(guān)注使其成為最受好評的JavaScript框架之一。

我對此很好奇，想嘗試一下，所以我花了一些時間創(chuàng)建了一個小型待辦事項應(yīng)用程序，來探索這個框架如何處理渲染組件、更新狀態(tài)、設(shè)置存儲等等。

如果您迫不及待地想查看最終代碼和結(jié)果，請查看最終演示： [此處應(yīng)插入最終演示鏈接，原文未提供]

快速入門

與大多數(shù)框架一樣，我們可以從安裝npm包開始。要將該框架與JSX一起使用，請運行：

 npm install solid-js babel-preset-solid

然後，我們需要將babel-preset-solid添加到我們的Babel、webpack或Rollup配置文件中：

 "presets": ["solid"]

或者，如果您想搭建一個小型應(yīng)用程序，您也可以使用他們的模板之一：

 # 從Solid模板創(chuàng)建一個小型應(yīng)用程序npx degit solidjs/templates/js my-app

# 更改到創(chuàng)建的項目目錄cd my-app

# 安裝依賴項npm i # 或yarn 或pnpm

# 啟動開發(fā)服務(wù)器npm run dev

支持TypeScript，如果您想啟動一個TypeScript項目，請將第一個命令更改為npx degit solidjs/templates/ts my-app 。

創(chuàng)建和渲染組件

渲染組件的語法類似於React.js，因此可能看起來很熟悉：

 import { render } from "solid-js/web";

const HelloMessage = props =><div> Hello {props.name}</div> ;

render(
  () =><hellomessage name="Taylor"></hellomessage> ,
  document.getElementById("hello-example")
);

我們需要先導(dǎo)入render函數(shù)，然後創(chuàng)建一個帶有文本和prop的div，並調(diào)用render，傳入組件和容器元素。

這段代碼隨後被編譯成真正的DOM表達(dá)式。例如，上面的代碼示例，一旦被Solid編譯，看起來像這樣：

 import { render, template, insert, createComponent } from "solid-js/web";

const _tmpl$ = template(`<div> Hello</div> `);

const HelloMessage = props => {
  const _el$ = _tmpl$.cloneNode(true);
  insert(_el$, () => props.name);
  return _el$;
};

render(
  () => createComponent(HelloMessage, { name: "Taylor" }),
  document.getElementById("hello-example")
);

Solid Playground非?？?，它顯示Solid有不同的渲染方式，包括客戶端、服務(wù)器端和帶有水合的客戶端。

使用Signals跟蹤變化的值

Solid使用一個名為createSignal的hook，它返回兩個函數(shù)：一個getter和一個setter。如果您習(xí)慣使用像React.js這樣的框架，這可能看起來有點奇怪。您通常期望第一個元素是值本身；但是，在Solid中，我們需要顯式調(diào)用getter來攔截讀取值的位置，以便跟蹤其更改。

例如，如果我們正在編寫以下代碼：

 const [todos, addTodos] = createSignal([]);

記錄todos不會返回值，而是一個函數(shù)。如果我們想使用該值，我們需要調(diào)用該函數(shù)，例如todos() 。

對於一個小的待辦事項列表，這將是：

 import { createSignal } from "solid-js";

const TodoList = () => {
  let input;
  const [todos, addTodos] = createSignal([]);

  const addTodo = value => {
    return addTodos([...todos(), value]);
  };

  return (
    <h1>To do list:</h1>
    <input type="text" ref="{el"> input = el} />
    <button onclick="{()"> addTodo(input.value)}>Add item</button>
    

{todos().map(item => (
• {item}
))}

上面的代碼示例將顯示一個文本字段，單擊“添加項目”按鈕後，將使用新項目更新todos並在列表中顯示它。

這看起來可能與使用useState非常相似，那麼使用getter有什麼不同呢？考慮以下代碼示例：

 console.log("Create Signals");
const [firstName, setFirstName] = createSignal("Whitney");
const [lastName, setLastName] = createSignal("Houston");
const [displayFullName, setDisplayFullName] = createSignal(true);

const displayName = createMemo(() => {
  if (!displayFullName()) return firstName();
  return `${firstName()} ${lastName()}`;
});

createEffect(() => console.log("My name is", displayName()));

console.log("Set showFullName: false ");
setDisplayFullName(false);

console.log("Change 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>

需要注意的主要一點是，在設(shè)置新的lastName後，“My name is...”沒有被記錄。這是因為此時沒有任何內(nèi)容正在監(jiān)聽lastName()的更改。只有當(dāng)displayFullName()的值更改時， displayName()的新值才會被設(shè)置，這就是為什麼當(dāng)setShowFullName被設(shè)置為true時，我們可以看到新的lastName被顯示。

這為我們提供了一種更安全的方式來跟蹤值的更新。

響應(yīng)式原語

在最後一個代碼示例中，我介紹了createSignal ，還有一些其他的原語： createEffect和createMemo 。

createEffect

createEffect跟蹤依賴項，並在每次依賴項發(fā)生更改的渲染後運行。

 // 不要忘記首先使用'import { createEffect } from "solid-js";' 導(dǎo)入它const [count, setCount] = createSignal(0);

createEffect(() => {
  console.log("Count is at", count());
});

每次count()的值發(fā)生更改時，都會記錄“Count is at...”

createMemo

createMemo創(chuàng)建一個只讀信號，每當(dāng)執(zhí)行的代碼的依賴項更新時，它都會重新計算其值。當(dāng)您想要緩存一些值並訪問它們而無需重新評估它們（直到依賴項更改）時，可以使用它。

例如，如果我們想顯示一個計數(shù)器100次並在單擊按鈕時更新值，使用createMemo將允許重新計算僅在每次點擊時發(fā)生一次：

 function Counter() {
  const [count, setCount] = createSignal(0);
  // 不用createMemo包裝counter會調(diào)用100次// const counter = () => {
  // return count();
  // }

  // 用createMemo包裝counter，每次更新只調(diào)用一次// 不要忘記首先使用'import { createMemo } from "solid-js";' 導(dǎo)入它const counter = createMemo(() => count());

  return (
    <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 ：

 // 不要忘記首先使用'import { onMount } from "solid-js";' 導(dǎo)入它onMount(() => {
  console.log("I mounted!");
});

onCleanup類似於React中的componentDidUnmount ——它在響應(yīng)式作用域重新計算時運行。

onError在最近的子作用域中發(fā)生錯誤時執(zhí)行。例如，當(dāng)數(shù)據(jù)獲取失敗時，我們可以使用它。

存儲

要為數(shù)據(jù)創(chuàng)建存儲，Solid公開了createStore ，其返回值是一個只讀代理對象和一個setter函數(shù)。

例如，如果我們將我們的待辦事項示例更改為使用存儲而不是狀態(tài)，它將如下所示：

 const [todos, addTodos] = createStore({ list: [] });

createEffect(() => {
  console.log(todos.list);
});

onMount(() => {
  addTodos('list', (list) => [...list, { item: "a new todo item", completed: false }]);
});

上面的代碼示例將首先記錄一個帶有空數(shù)組的代理對象，然後記錄一個帶有數(shù)組的代理對象，該數(shù)組包含對象{item: "a new todo item", completed: false} 。

需要注意的是，如果不訪問其屬性，則無法跟蹤頂級狀態(tài)對象——這就是為什麼我們記錄todos.list而不是todos的原因。

如果我們只在createEffect中記錄todos ，我們將看到列表的初始值，但不會看到在onMount中進行更新後的值。

要更改存儲中的值，我們可以使用在使用createStore時定義的設(shè)置函數(shù)來更新它們。例如，如果我們想將待辦事項列表項更新為“已完成”，我們可以通過這種方式更新存儲：

 const [todos, setTodos] = createStore({
  list: [{ item: "new item", completed: false }]
});

const markAsComplete = text => {
  setTodos(
    "list",
    (i) => i.item === text,
    "completed",
    (c) => !c
  );
};

return (
  <button onclick="{()"> markAsComplete("new item")}>Mark as complete</button>
);

控制流

為了避免在使用.map()等方法時在每次更新時浪費性地重新創(chuàng)建所有DOM節(jié)點，Solid允許我們使用模板助手。

其中一些可用，例如For用於循環(huán)遍歷項目， Show用於有條件地顯示和隱藏元素， Switch和Match用於顯示與特定條件匹配的元素，等等！

以下是一些顯示如何使用它們的示例：

<for each="{todos.list}" fallback="{<div"> Loading... }>
  {(item) =><div> {item}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div"> Loading... }>
  <div>1st item completed</div>
</show>
<switch fallback="{<div"> No items }>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>

演示項目

這是對Solid基礎(chǔ)知識的快速介紹。如果您想試用它，我創(chuàng)建了一個入門項目，您可以通過單擊下面的按鈕將其自動部署到Netlify並克隆到您的GitHub！

[此處應(yīng)插入部署到Netlify的按鈕，原文未提供] 該項目包括Solid項目的默認(rèn)設(shè)置，以及我在這篇文章中提到的基本概念的示例待辦事項應(yīng)用程序，以幫助您入門！

這個框架比我在這裡介紹的要多得多，所以請隨意查看文檔以了解更多信息！

以上是固體JavaScript庫簡介的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！