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

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

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

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

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

快速入門

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

npm install solid-js babel-preset-solid

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

"presets": ["solid"]

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

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

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

# 安裝依賴項(xiàng)
npm i # 或 yarn 或 pnpm

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

支持TypeScript，如果您想啟動(dòng)一個(gè)TypeScript項(xiàng)目，請(qǐng)將第一個(gè)命令更改為npx degit solidjs/templates/ts my-app。

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

渲染組件的語(yǔ)法類似于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)建一個(gè)帶有文本和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使用一個(gè)名為createSignal的hook，它返回兩個(gè)函數(shù)：一個(gè)getter和一個(gè)setter。如果您習(xí)慣使用像React.js這樣的框架，這可能看起來有點(diǎn)奇怪。您通常期望第一個(gè)元素是值本身；但是，在Solid中，我們需要顯式調(diào)用getter來攔截讀取值的位置，以便跟蹤其更改。

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

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

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

對(duì)于一個(gè)小的待辦事項(xiàng)列表，這將是：

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

上面的代碼示例將顯示一個(gè)文本字段，單擊“添加項(xiàng)目”按鈕后，將使用新項(xiàng)目更新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);

運(yùn)行上面的代碼將得到：

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

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

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

響應(yīng)式原語(yǔ)

在最后一個(gè)代碼示例中，我介紹了createSignal，還有一些其他的原語(yǔ)：createEffect和createMemo。

createEffect

createEffect跟蹤依賴項(xiàng)，并在每次依賴項(xiàng)發(fā)生更改的渲染后運(yùn)行。

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

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

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

createMemo

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

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

function Counter() {
  const [count, setCount] = createSignal(0);
  // 不用createMemo包裝counter會(huì)調(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公開了幾個(gè)生命周期方法，例如onMount、onCleanup和onError。如果我們希望某些代碼在初始渲染后運(yùn)行，我們需要使用onMount：

// 不要忘記首先使用 'import { onMount } from "solid-js";' 導(dǎo)入它

onMount(() => {
  console.log("I mounted!");
});

onCleanup類似于React中的componentDidUnmount——它在響應(yīng)式作用域重新計(jì)算時(shí)運(yùn)行。

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

存儲(chǔ)

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

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

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

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

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

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

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

如果我們只在createEffect中記錄todos，我們將看到列表的初始值，但不會(huì)看到在onMount中進(jìn)行更新后的值。

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

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()等方法時(shí)在每次更新時(shí)浪費(fèi)性地重新創(chuàng)建所有DOM節(jié)點(diǎn)，Solid允許我們使用模板助手。

其中一些可用，例如For用于循環(huán)遍歷項(xiàng)目，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>

演示項(xiàng)目

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

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

這個(gè)框架比我在這里介紹的要多得多，所以請(qǐng)隨意查看文檔以了解更多信息！

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