История одного компонента

Введение в любой фреймвок начинается с написания одного простого компонента. Чаще всего этим компонентом будет «счетчик нажатий». Это своеобразный «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-лист

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

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