Введение в любой фреймвок начинается с написания одного простого компонента. Чаще всего этим компонентом будет "счетчик нажатий". Это своеобразный "hello world" в мире фронтенд разработки. Именно поэтому я и возьму его за основу данного материала.

Когда-то давно я задался вопросом: можно ли создавать фронтенд также легко как в React, но без ререндера и скрытых слоев для вычисления состояния и обновления DOM, а только лишь с помошью конструкций самого языка JavaScript?

Решение этого вопроса и оттачивание АПИ заняло у меня несколько лет экспериментов, переписывания всего с нуля, понимания самой сущности метода и универсализации подхода.

Поэтому без лишних рассуждений хочу предоставить вам код этого компонента. Далее будут показаны три версии одного и того же копонента.

Версия 1

import { update } from '@fusorjs/dom';

const ClickCounter = (props) => {
  let state = props.count || 0;

  const self = (
    <button click_e={() => {state++; update(self);}}>
      Clicked {() => state} times
    </button>
  );

  return self;
};

click_e - устанавливает обработчик событий, а _e позволяет устанавливать множество полезных параметоров, например: click_e_capture_once, для совместимости с W3C стандартом.

Здесь функция компонента вызывается один раз при его создании, а обновление происходит при клике. Также мы извлекли состояние ("lifted state up") из самой библиотеки что позволяет использовать любую стратегию управления состоянием.

Вот как выглядит использование этого компонента:

import { getElement } from '@fusorjs/dom';

const App = () => (
  <div>
    <ClickCounter />
    <ClickCounter count={22} />
    <ClickCounter count={333} />
  </div>
);

document.body.append(getElement(<App />));

Далее я подумал что мой компонент выглядит достаточно хорошо, но примерно столько же кода потребуется для его создания и в React, а нельзя ли его сделать более компактным?

Версия 2

Здесь я упрощю установку переменной состояния с помощью возможностей JavaScript по распаковке объектных аргументов функции с заданием значений по умолчанию. А также тем фактом что вторым параметром в функцию обработчика события можно передать указатель на сам объект для которого произошло событие.

const ClickCounter = ({ count = 0 }) => (
  <button click_e={(event, self) => {count++; update(self);}}>
    Clicked {() => count} times
  </button>
);

Вот теперь я был доволен. Теперь получилось гораздо компактнее чем в React. Тем более если добавить useCallback, справедливости ради, так как наша функция компонента выполняется единожды и не пересоздает обработчик события.

Долго-ли коротко-ли но меня осенило...

Версия 3

Ведь у нас есть универсальный синтаксис установки параметров для всех атрибутов компонента, так почему не добавить еще один параметр: update?

const ClickCounter = ({ count = 0 }) => (
  <button click_e_update={() => count++}>
    Clicked {() => count} times
  </button>
);

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

Вот рабочий пример нашего компонента

Итог

Данное упражнение позволило понять что такие простые компоненты, которые содержат обработчики событий, не нуждаются в реактивных системах управления состоянием, таких как useState/Signals/Redux/Mobx... Для них достаточны обыкновенные переменные.

Вот еще один пример такого компонента:

const UppercaseInput = ({ value = "" }) => (
  <input 
    value={() => value.toUpperCase()}
    input_e_update={(event) => (value = event.target.value)}
  />
)

В терминах React это называется "managed input" компонент. Его попробовать можно тут в альтернативном стиле (не JSX).

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

Этого легко можно добиться с помощью установки одного коллбека пропсы mount, что так же просто как использовать useState в React. Вот тут разобран подробный пример.

Также эти ссылки могут быть вам полезны:

• Туториал по библиотеке

• Приложение TODO-лист

• Домашняя страница библиотеки

Спасибо за внимание!