Знакомство с библиотекой Solid JavaScript

От автора: Solid — это библиотека JavaScript для создания пользовательских интерфейсов без виртуальной DOM. Она компилирует шаблоны до реальных узлов DOM один раз и обертывает обновления, так что при обновлении состояния выполняется только обновленный код.

Таким образом, компилятор может оптимизировать начальную визуализацию, а среда выполнения оптимизирует обновления. Такой упор на производительность делает Solid JavaScript одним из самых популярных фреймворков JavaScript.

Мне это стало любопытно и захотелось попробовать, поэтому я потратил некоторое время на создание небольшого приложения, чтобы изучить, как этот фреймворк обрабатывает компоненты рендеринга, обновляет состояние, настраивает хранилища и многое другое.

Вот финальная демонстрация, если вам не терпится увидеть окончательный код и результат:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Как и для большинства фреймворков, мы можем начать с установки npm пакета. Чтобы использовать фреймворк с JSX, запустите:

Затем нам нужно добавить babel-preset-solid в наш конфигурационный файл Babel, webpack или Rollup:

Или, если вы хотите создать небольшое приложение, вы также можете использовать один из их шаблонов:

Существует поддержка TypeScript, поэтому, если вы хотите запустить проект TypeScript, измените первую команду на npx degit solidjs/templates/ts my-app.

Создание и рендеринг компонентов

Для визуализации компонентов синтаксис похож на React.js, поэтому он может показаться знакомым:

Нам нужно начать с импорта функции render, затем мы создаем div с некоторым текстом и свойством, и вызываем render, передавая компонент и элемент контейнера.

Затем этот код компилируется в реальные выражения DOM. Например, приведенный выше пример кода, скомпилированный Solid, выглядит примерно так:

Solid Playground довольно крутая штука, она показывает, что Solid имеет разные способы рендеринга, включая клиентский, серверный и клиентский с гидратацией.

Отслеживание изменения значений с помощью Signals

Solid использует хук createSignal, который возвращает две функции: геттер и сеттер. Если вы привыкли использовать такой фреймворк, как React.js, это может показаться немного странным. Обычно вы ожидаете, что первым элементом будет само значение; однако в Solid нам нужно явно вызвать геттер, чтобы перехватить, где считывается значение, для отслеживания его изменений. Например, если мы напишем следующий код:

Отслеживание todos вернет не значение, а функцию. Если мы хотим использовать значение, нам нужно вызвать функцию, как в todos(). Для небольшого списка todo это будет так:

В приведенном выше примере кода будет отображаться текстовое поле, и после нажатия кнопки «Добавить элемент», todos будут обновлены новым элементом и отображены в списке.

Это может показаться очень похожим на использование useState, так чем отличается использование геттера? Рассмотрим следующий пример кода:

Результатом выполнение приведенного выше будет:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Заметьте, что My name is …не регистрируется после установки новой фамилии. Это потому, что на данный момент ничего не отслеживает изменения lastName(). Новое значение displayName() устанавливается только при изменении значения displayFullName(), поэтому мы можем видеть новую фамилию, отображаемую, когда значение setShowFullName установлено обратно на true.

Это дает нам более безопасный способ отслеживать обновления значений.

Примитивы

В последнем примере кода я представил createSignal, а также пару других примитивов: createEffect и createMemo.

createEffect

createEffect отслеживает зависимости и запускается после каждого рендеринга, в котором зависимость изменилась.

Count is at…регистрирует каждое изменение значения count().

createMemo

createMemo создает сигнал только для чтения, который пересчитывает значение при каждом обновлении зависимостей исполняемого кода. Вы можете использовать его, когда хотите кэшировать некоторые значения и получать к ним доступ без их повторной оценки до тех пор, пока не изменится зависимость.

Например, если мы хотим отображать счетчик 100 раз и обновлять значение при нажатии на кнопку, использование createMemo позволит выполнить пересчет только один раз за клик:

Методы жизненного цикла

Solid предоставляет несколько методов жизненного цикла, например onMount, onCleanup и onError. Если мы хотим, чтобы какой-то код запускался после первоначального рендеринга, нам нужно использовать onMount:

onCleanup аналогичен componentDidUnmount в React. onError выполняется, когда есть ошибка в ближайшей дочерней области. Например, мы могли бы использовать его при сбое выборки данных.

Хранилища

Для создания хранилищ данных Solid использует createStore которое возвращает прокси-объект и функцию сеттера. Например, если бы мы изменили наш пример задачи, чтобы использовать хранилище вместо state, это выглядело бы примерно так:

Приведенный выше пример кода начинается с регистрации прокси-объекта с пустым массивом, за которым следует прокси-объект с массивом, содержащим объект {item: «a new todo item», completed: false}.

Следует отметить, что объект состояния верхнего уровня не может быть отслежен без доступа к его свойству — поэтому мы используем todos.list а не todos.

Если бы мы отслеживали todo в createEffect, мы бы увидели начальное значение списка, а не то значение, которое было после обновления, сделанного в onMount.

Чтобы изменить значения в хранилищах, мы можем обновить их, используя функцию настройки, которую мы определяем при использовании createStore. Например, если мы хотим обновить элемент списка задач на «завершено», мы могли бы обновить хранилище следующим образом:

Поток управления

Чтобы избежать расточительного воссоздания всех узлов DOM при каждом обновлении при использовании таких методов, как .map(), мы можем использовать шаблоны помошники.

Некоторые из них: For — перебрать элементы, Show -условно показать и скрыть элементы, Switch и Match — показать элементы, которые соответствуют определенному условию, и многое другое! Вот несколько примеров, показывающих, как их использовать:

Демонстрационный проект

Это было быстрое введение в основы Solid. Если вы хотите поэкспериментировать с ним, я создал стартовый проект, который вы можете автоматически развернуть на Netlify и клонировать в свой GitHub, перейдя по ссылке.

Этот проект включает в себя настройку по умолчанию для Solid проекта, а также образец приложения Todo с базовыми концепциями, которые я упомянул в этом посте.

Структура проекта гораздо больше, чем та, что я здесь рассмотрел, поэтому не стесняйтесь знакомиться с документацией для получения дополнительной информации!

Автор: Charlie Gerard

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.