- Точные обновления реального DOM.
- Декларативные данные. Смоделируйте свое состояние как систему с реактивными примитивами.
- Ментальная модель с однократным рендерингом. Ваши компоненты представляют собой обычные функции JavaScript, которые запускаются один раз для настройки вашего представления.
- Автоматическое отслеживание зависимостей: доступ к вашему реактивному состоянию подписывается на него.
- Маленький и быстрый.
- Простота. Изучите несколько эффективных концепций, которые можно повторно использовать, комбинировать и развивать в процессе разработки.
Понимание SolidJS
Разработчики обычно говорят, что производительность SolidJS великолепна, учитывая тот факт, что его концепция реактивности (за счет Virtual DOM) является загадкой для этого повышения производительности. Чтобы полностью понять динамику SolidJS, мы должны внимательно изучить уровень компонентов, управление состоянием (сигналы и хранилища), маршрутизацию и т. д.
Компоненты
Как и все фреймворки JavaScript, SolidJS состоит из компонентов и построен на идее компонентов. Эти компоненты представляют собой небольшие сегментированные разделы приложения, такие как страница, определенная задача, поле ввода или нижний колонтитул.
Давайте посмотрим на пример компонента на основе SolidJS:
function Component(props) {
return <div>Hello {props.name}</div>;
}
<Component name="Ejiro" />;
Компоненты SolidJS — это, по сути, функции JavaScript, которые выводят JSX, гибрид HTML и JavaScript.
Визуализация
Синтаксис аналогичен React.js для рендеринга компонентов, поэтому он может показаться знакомым:
import { render } from 'solid-js/web';
import './index.css';
import App from './App';
render(() => <App />, document.getElementById('root'));
Функция рендеринга должна быть сначала импортирована, прежде чем мы сможем продолжить. После создания div с некоторыми text и prop мы визуализируем компонент и элемент контейнера:
import { render } from 'solid-js/web';
function HelloWorld() {
return <div>Hello World!</div>;
}
render(() => <HelloWorld />, document.getElementById('app'))
Маршрутизация
Как и любой другой фреймворк, SolidJS имеет собственный метод обработки маршрутизации, который позволяет пользователям переходить между разными веб-страницами.
Установка роутинга в SolidJS — это первый шаг в его реализации:
npm i @solidjs/router
Оберните корневой компонент в компонент @solidjs/router после установки:
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
render(
() => (
<Router>
<App />
</Router>
),
document.getElementById("app")
);
Обернув корневой компонент, мы можем отображать маршруты в любом месте приложения.
Сигналы
Наблюдаемый фрагмент данных, который автоматически отслеживает вычисления, от которых он зависит, представлен сигналом. Список подписки на сигнал расширяется всякий раз, когда вычисление (такое как эффект или памятка) вызывает метод получения. Все подписчики сигнала будут уведомлены, если данные изменятся. В двух словах, сигналы — это всего лишь способы управления состоянием в SolidJS.
Вот краткий пример сигнала:
import { For, createSignal } from "solid-js";
const App = () => {
let input;
let todoId = 0;
const [todos, setTodos] = createSignal([])
const addTodo = (text) => {
setTodos([...todos(), { id: ++todoId, text, completed: false }]);
}
const toggleTodo = (id) => {
setTodos(todos().map((todo) => (
todo.id !== id ? todo : { ...todo, completed: !todo.completed }
)));
}
Магазины
Solid реагирует на вложенную реактивность в хранилищах отслеживаемыми прокси-объектами, которые могут включать в себя дополнительные объекты, которые также будут автоматически упакованы в прокси-серверы и т. д.
SolidJS генерирует сигналы для переменных, доступ к которым осуществляется через области отслеживания. По сути, магазин — это дерево сигналов, которые отслеживаются и корректируются индивидуально.
Итак, в нашем примере сигнала мы заменим сигнал хранилищем, как показано ниже:
import { createStore } from "solid-js/store";
const App = () => {
let input;
let todoId = 0;
const [todos, setTodos] = createStore([]);
const addTodo = (text) => {
setTodos([...todos, { id: ++todoId, text, completed: false }]);
}
const toggleTodo = (id) => {
setTodos(todo => todo.id === id, "completed", completed => !completed);
}
Начало работы с SolidJS
С SolidJS можно начать двумя способами. Первый — через их онлайн REPL, который полезен для прототипирования в последнюю минуту. Второй метод предполагает клонирование уже готового шаблона команды SolidJS, который будет использоваться для этого проекта.
Установка
Существует две версии шаблонов: шаблон TypeScript и шаблон JavaScript. Для этого введения мы будем использовать версию JavaScript; позже мы поговорим о версии TypeScript.
npx degit solidjs/templates/js todo-app cd todo-app npm i npm run dev
Создание компонентов Todo
Мы разработаем компонент Todolist.jsx, который будет иметь поле ввода и список всех задач, которые пользователь когда-либо регистрировал:
import styles from "./Todolist.module.css"
import { TiDeleteOutline } from 'solid-icons/ti'
import { createStore } from "solid-js/store"
function TodoList() {
let input;
const addTodo = (input) => {
const title = input.value;
if (!title.trim()) return;
setTodos({
objects: [{ text: title, id: todos.counter }, ...todos.objects],
counter: todos.counter + 1
});
input.value = "";
}
const deleteTodo = (output) => {
setTodos('objects', (t) => t.filter((object) => object.id !== output))
}
const [todos, setTodos] = createStore({
objects: [],
counter: 0,
})
return (
</>
<div class={styles.container}>
<input type="text" ref={input}
placeholder="What do you have in mind today?" name="todo"
onKeyDown={(e) => {
if (e.key === "Enter") {
addTodo(input);
}
}}>
</input>
<ul class={styles.todoList}>
<For each={todos.objects}>{(todo) =>
<li>
<div class={styles.todoItem}>
{todo.text}
<TiDeleteOutline onClick={() => {
deleteTodo(todo.id)}}></TiDeleteOutline>
</div>
</li>
}
</For>
</ul>
</div>
</>
);
}
export default TodoList
Далее нам нужно стилизовать наше приложение, создав компонент Todolist.module.css и обновив наш блок кода ниже:
.todoList li {
padding: 20px;
font-size: 1.3em;
background-color: #f09560;
border-left: 5px solid #88f63e;
margin-bottom: 2px;
color: #3E5252;
border-radius: 50px;
}
input {
width: calc(100% - 40px);
border-radius: 50px;
padding: 20px;
font-size: 1.3em;
background-color: #c7d6d6;
color: #4e5c5c;
}
li .todoItem{
display:flex;
justify-content: space-between;
}
Вот как сейчас выглядит наше приложение:
SolidJS с TypeScript
Solid создан для простого использования с TypeScript. Он использует стандартный JSX, который создает код, который может понять TypeScript, и имеет расширенные встроенные типы для своего API. Эта статья предлагает несколько полезных советов по использованию TypeScript и написанию кода SolidJS.
Установка шаблона TypeScript очень похожа на установку шаблона JavaScript:
npx degit solidjs/templates/ts my-app cd my-app npm i npm run dev
Мы не будем вдаваться в подробности, но для запуска TypeScript с компилятором SolidJS необходимо настроить функцию TypeScript в файле tsconfig.json. Кроме того, для API, сигналов, контекста и типов компонентов вы можете посмотреть документацию TypeScript.
Сравнение
Если у вас есть опыт работы с другими фреймворками, вам будет легко создать CRUD-приложение. Это связано со значительным сходством Solid с библиотеками с точки зрения синтаксиса и архитектуры. Он использует ту же структуру, включая одностороннюю привязку данных, фрагменты, возврат JSX и функциональные компоненты.
По сравнению с другими библиотеками в SolidJS использование эффектов, ссылок и событий также очень похоже. Поэтому можно с уверенностью утверждать, что Solid предлагает примерно такой же синтаксический сахар, как и другие библиотеки, такие как React, Vue и Svelte, если не немного отличается. Тогда зачем нам нужен еще один JavaScript-подобный фреймворк для веб-приложений?
Производительность, опыт разработчиков, метод рендеринга и реактивность — все это области, в которых SolidJS и эти платформы расходятся.
Заключение
Мы рассмотрели некоторые основные функции SolidJS и создали простое приложение Todo, которое успешно демонстрирует некоторые из его функций. Изучите SolidJS и TypeScript, и вы увидите, что SolidJS продемонстрировал определенные обнадеживающие черты. Вот почему SolidJS считается одним из надежных фреймворков, таких как React.
