Использование с React

Bliss.js — легковесная библиотека для упрощения работы с DOM, манипуляций элементами и событийной моделью. При использовании вместе с React её возможности несколько изменяются из-за виртуального DOM, однако правильная интеграция позволяет ускорить работу с нативными элементами, управлять событиями и создавать динамические эффекты без полной переработки компонентов.

Работа с DOM-элементами внутри компонентов

React использует виртуальный DOM, поэтому прямые манипуляции с элементами через document.querySelector или другие методы обычно не рекомендуются. Bliss.js предоставляет удобный синтаксис для обращения к нативным DOM-элементам через рефы.

import React, { useRef, useEffect } from "react";
import { $ } from "bliss";

function ExampleComponent() {
    const buttonRef = useRef(null);

    useEffect(() => {
        const button = $(buttonRef.current);
        button.on("click", () => alert("Нажата кнопка через Bliss.js"));
        return () => button.off("click");
    }, []);

    return <button ref={buttonRef}>Нажми меня</button>;
}

Ключевые моменты:

  • Использование useRef позволяет получить ссылку на DOM-узел.
  • Bliss.js оборачивает нативный элемент, предоставляя удобные методы on, off, addClass, removeClass.
  • Отписка от событий в useEffect предотвращает утечки памяти.

Манипуляции с классами и атрибутами

Bliss.js упрощает работу с классами и атрибутами элементов. В React это удобно для анимаций или динамических изменений вне состояния компонента.

import React, { useRef, useEffect } from "react";
import { $ } from "bliss";

function ToggleComponent() {
    const divRef = useRef(null);

    useEffect(() => {
        const div = $(divRef.current);
        div.on("mouseenter", () => div.addClass("highlight"));
        div.on("mouseleave", () => div.removeClass("highlight"));
    }, []);

    return <div ref={divRef}>Наведи на меня мышью</div>;
}

Особенности использования:

  • Методы addClass, removeClass и toggleClass позволяют управлять стилями без изменения состояния React.
  • Bliss.js позволяет работать с атрибутами через attr:
div.attr("data-active", "true");

Анимации и эффекты

Bliss.js включает удобные методы для работы с анимациями: fadeIn, fadeOut, slideUp, slideDown. В React их стоит использовать осторожно, чтобы избежать конфликтов с ререндерингом.

import React, { useRef, useEffect } from "react";
import { $ } from "bliss";

function FadeComponent() {
    const divRef = useRef(null);

    useEffect(() => {
        const div = $(divRef.current);
        div.fadeIn(500); // плавное появление при монтировании компонента
    }, []);

    return <div ref={divRef} style={{ display: "none" }}>Привет, мир!</div>;
}

Рекомендации:

  • Начальное состояние элемента (display: none) необходимо задавать вручную.
  • Для скрытия элемента используется fadeOut, что позволяет добавить плавное исчезновение без вмешательства в React state.

Работа с формами и событиями

Bliss.js облегчает работу с формами, особенно при динамическом создании элементов. События change, input и submit обрабатываются с тем же удобством, что и клики.

import React, { useRef, useEffect } from "react";
import { $ } from "bliss";

function FormComponent() {
    const formRef = useRef(null);

    useEffect(() => {
        const form = $(formRef.current);
        form.on("submit", (e) => {
            e.preventDefault();
            const formData = new FormData(form[0]);
            console.log(Object.fromEntries(formData));
        });
    }, []);

    return (
        <form ref={formRef}>
            <input name="username" placeholder="Имя" />
            <button type="submit">Отправить</button>
        </form>
    );
}

Особенности:

  • Bliss.js использует обёртку массива (form[0]) для доступа к нативному DOM.
  • Методы работы с формами интегрируются с существующими React-событиями без конфликтов.

Массивные селекторы и фильтры

Bliss.js позволяет работать сразу с набором элементов, что полезно при создании списков в React с динамическим контентом.

import React, { useEffect } from "react";
import { $ } from "bliss";

function ListComponent({ items }) {
    useEffect(() => {
        const divs = $(".list-item");
        divs.each((el) => $(el).on("click", () => console.log(el.textContent)));
    }, [items]);

    return (
        <div>
            {items.map((item, idx) => (
                <div key={idx} className="list-item">{item}</div>
            ))}
        </div>
    );
}

Особенности применения:

  • Классический селектор $() работает с классами, тегами, id.
  • Метод each обходит все элементы и позволяет назначать события индивидуально.
  • Использование эффекта с зависимостью [items] гарантирует обновление событий при изменении списка.

Сочетание с хуками состояния

Bliss.js не конфликтует с React state и hooks, но манипуляции напрямую с DOM стоит ограничивать для предотвращения расхождения с виртуальным DOM. Часто используется комбинация для анимаций или временных эффектов:

import React, { useRef, useState, useEffect } from "react";
import { $ } from "bliss";

function HighlightToggle() {
    const [active, setActive] = useState(false);
    const divRef = useRef(null);

    useEffect(() => {
        const div = $(divRef.current);
        if (active) div.addClass("highlight");
        else div.removeClass("highlight");
    }, [active]);

    return <div ref={divRef} onCl ick={() => setActive(!active)}>Кликни меня</div>;
}

Выводы по использованию:

  • Bliss.js удобно применять для визуальных эффектов, не влияющих на бизнес-логику.
  • Состояния React контролируют логику, а Bliss.js — оформление и анимации.
  • Комбинация хуков useEffect и рефов обеспечивает безопасную интеграцию.

Заключение по применению

Bliss.js в связке с React становится инструментом для ускоренной работы с нативными DOM-элементами, создания анимаций и управления событиями. Главное правило — использовать его только для визуальных и локальных эффектов, а все состояние и бизнес-логику оставлять под контролем React. Такой подход обеспечивает совместимость с виртуальным DOM, предотвращает неожиданные ререндеры и сохраняет производительность.

Оглавление