Одна небольшая вещь, которая показалась интересной в solid js, это то, как работают binding’и в ивентах.

Для тех, кто не в курсе о чем речь, в solid есть 2 способа того, как вы можете описывать ваши ивент хендлеры:

// первый способ
const handleClick = e => {...}
<div onClick={handleClick}></div>

// второй способ
const handleClick = (id, e) => {...}
<div onClick={[handleClick, item.id]}></div>

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

Однако в доке написано:

This doesn't use bind or create an additional closure, so it is a highly optimized way of delegating events.

Поэтому мне стало интересно, как же это вообще работает. Если зайти в playground, то можно увидеть, что наш JSX скомпилится в что-то такое:

const _el$ = _tmpl$();
_el$.$$click = handleClick;
_el$.$$clickData = item.id;

То есть как вы можете увидеть, обработчик ивента и сами данные биндятся на прямую в DOM элемент. Дальше, когда ивент доход до document (да, в solid тоже есть делегация ивентов) там из event.target берется сам обработчик и дата, которая была прикреплена к данному элементу (ссылка на код). Затем уже обработчик вызывается с правильной датой и ивентом.

В целом, не сказать, что это какая-то сильная оптимизация. Да и биндинг даты сам не реактивный. Но чисто с технической стороны меня такой трюк порадовал)))

#devtips #solid