Что такое Solid
SolidJS — библиотека для создания интерфейсов в браузере. Как и React, она собирает страницу из компонентов и использует JSX, но обновляет страницу по-другому: без виртуального DOM, точечно меняя только те узлы, которые зависят от изменившихся данных. Курс написан для Solid 1.9.
Реактивность
Реактивность — это способность интерфейса самому обновляться, когда меняются данные. В Solid данные хранятся в сигналах. Сигнал — это значение, которое помнит, кто его читал, и сообщает читателям об изменении.
// src/App.jsx
import { createSignal } from 'solid-js';
export default function App() {
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>Нажато: {count()}</button>;
}При каждом нажатии меняется только текст внутри кнопки. Сама функция App больше не вызывается.
Чем Solid отличается от React
| React | Solid | |
|---|---|---|
| Функция компонента | Вызывается при каждом обновлении | Вызывается один раз |
| Состояние | useState возвращает значение | createSignal возвращает функцию-геттер |
| Обновление страницы | Сравнение виртуального DOM | Прямое изменение нужных узлов |
| Правила хуков | Нельзя вызывать в условиях | Таких правил нет |
| Списки и условия | map и && | Компоненты For и Show |
| Пропсы | Можно деструктурировать | Деструктуризация ломает обновления |
Главное, что нужно запомнить: компонент в Solid — это функция настройки. Она один раз создаёт DOM и связи между данными и узлами, а дальше работают сигналы.
Сигналы — это функции
Значение сигнала читают вызовом: count(), а не count. Именно вызов внутри JSX регистрирует подписку. Если написать {count} без скобок, Solid получит саму функцию и тоже будет её вызывать, но в обычном коде (сравнениях, вычислениях) нужны скобки.
Что будет в курсе
Сначала вы соберёте список задач: компоненты, сигналы, хранилища, условия и списки. Затем — маленький блог, который загружает статьи с https://jsonplaceholder.typicode.com, с маршрутами, страницей статьи и обработкой ошибок. В конце — сборка и тесты.
SolidStart
SolidStart — метафреймворк поверх Solid, как Next.js поверх React: серверный рендеринг, маршруты по файлам, серверные функции. В этом курсе он не нужен: всё строится на Solid, Vite и Solid Router.
Частая ошибка
Переносить привычки React: ждать, что функция компонента выполнится заново, и писать в её теле вычисления вроде const total = count() * 2. Такая строка выполнится один раз, и total никогда не изменится. Значения, зависящие от сигналов, оформляйте функциями: const total = () => count() * 2.