Solidjs — это библиотека javascript, которая помогает вам создавать пользовательский интерфейс. Вместо использования виртуальной модели DOM она использует реактивное программирование для обновления модели DOM.

Ключевая особенность

  • Мелкозернистые обновления фактического DOM
  • Ментальная модель однократного рендеринга: ваши компоненты представляют собой обычные функции JavaScript, которые запускаются один раз для настройки вашего представления.
  • Автоматическое отслеживание зависимостей: доступ к вашему реактивному состоянию подписывается на него
  • Предоставляет современные функции платформы, такие как JSX, фрагменты, контекст, порталы, приостановка, потоковая SSR, прогрессивная гидратация, границы ошибок и одновременный рендеринг.
  • Дружественный к веб-компонентам и может создавать собственные элементы

Существует два основных типа строительных блоков: компоненты и реактивные примитивы.

1. Компоненты: компонент — это функция, которая принимает свойства (ввод) в качестве аргумента и возвращает элемент JSX.

const Hello = (props) => {
  return <h1>Hello {props.name}</h1>;
};
<Hello name="John" />;

2. Реактивные примитивы. Реактивный примитив — это значение, которое можно наблюдать и которое обеспечивает актуальность представления. Есть три основных примитива: Сигналы, Заметки и Эффекты.

  • Сигналы. Сигналы — это строительные блоки реактивного программирования. Они отслеживают изменение значения с течением времени.
  • Эффекты. Эффекты используются для выполнения побочных эффектов. Они используются для проверки любых изменений зависимостей. В отличие от react вам не нужно передавать зависимости вручную. Solid автоматически отслеживает свои зависимости и автоматически перезапускает функцию при каждом обновлении зависимостей.
  • Заметки. Заметки позволяют эффективно использовать производное значение во многих реактивных вычислениях.

Давайте разберемся на простом примере.

import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo } from "solid-js";
function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount((c) => c + 1);
  createEffect(() => {
    console.log("Count Changed", count());
  });
  const value = createMemo(() => count() * count());
  console.log("Value", value());
  return (
    <div>
      <h1>{count()}</h1>
      <button type="button" onClick={increment}>
        Increment
      </button>
    </div>
  );
}
render(() => <Counter />, document.getElementById("app")!);
  • createSignal: возвращает сигнал и функцию для обновления сигнала.
// Solid
const [getCount, setCount] = createSignal(0);
// React
const [count, setCount] = useState(0);

ПРИМЕЧАНИЕ: createSignal похож на useState в реакции. Единственная разница в том, что он возвращает 2 функции геттера и сеттера.

  • createEffect: принимает функцию, которая будет вызываться при изменении сигнала. Без каких-либо зависимостей он будет вызываться каждый раз при изменении сигнала.
// Solid
createEffect(() => {
  console.log("count changed", getCount());
});
// React
useEffect(() => {
  console.log("count changed", count);
}, [count]);

ПРИМЕЧАНИЕ: createEffect похож на useEffect в реакции. Не требует никакого массива зависимостей.

  • createMemo: createMemo создает доступное только для чтения реактивное значение, равное возвращаемому значению данной функции, и гарантирует, что функция будет выполняться только при изменении ее зависимостей.
// Solid
const value = createMemo(() => computeExpensiveValue(a(), b()));
// React
const value = useMemo(() => computeExpensiveValue(a(), b()), [a, b]);

ПРИМЕЧАНИЕ. createMemo похож на useMemo в реакции. Не требует никакого массива зависимостей.

Попробуйте твердое онлайн

Чтобы начать работу с Solid, нужно попробовать его в Интернете, https://playground.solidjs.com — это простой способ опробовать идеи.

Локальная установка:

> npx degit solidjs/templates/ts counter-app
> cd counter-app
> npm i
> npm run dev

Спасибо, что читаете 😊

Есть вопросы или дополнительные? пожалуйста, оставьте комментарий.

Обязательно к прочтению, если вы не читали
Передовые практики и шаблоны реагирования для сокращения кода — Часть 1
 Передовые практики и шаблоны реагирования для сокращения кода — Часть 2
3 шага для создания пользовательское управление состоянием с помощью React и Context API

Больше контента на Средних

Следуйте за мной на Github, Twitter, LinkedIn, Dev.to и Stackblitz.