Первый взгляд на Solid.js

import { createSignal } from 'solid-js' export const App = () => { const [count, setCount] = createSignal(0) const increment = () => setCount(count() + 1) return ( <div> <p>Antihype JS</p> <button onClick={increment}> {count()} </button> </div> ) }

Реактивность

import { createSignal } from 'solid-js' const [count, setCount] = createSignal(0)

import { createEffect } from 'solid-js' createEffect(() => console.log("count:", count()))

import { createSignal, createMemo } from 'solid-js' const [firstName] = createSignal('') const [lastName] = createSignal('') const userName = createMemo(() => `${firstName()} ${lastName()}`)

Жизненный цикл компонента

import { createSignal, onMount, onCleanup } from 'solid-js' export const Counter = () => { const [count, setCount] = createSignal(0) const increment = () => setCount(count() + 1) onMount(() => console.log('mount')) onCleanup(() => console.log('unmount')) return <button onClick={increment}>{count()}</button> }

Компилятор JSX

import { createSignal } from 'solid-js' export const App = () => { const [count, setCount] = createSignal(0) const increment = () => setCount(count() + 1) return ( <div> <p>Antihype JS</p> <button onClick={increment}>{count()}</button> </div> ) }

const _tmpl$ = /*#__PURE__*/template(`<div><p>Antihype JS</p><button>`); const App = () => { const [count, setCount] = createSignal(0); const increment = () => setCount(count() + 1); return (() => { const _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling; _el$3.$$click = increment; insert(_el$3, count); return _el$; })(); };

<Show when={joinedAntihypeJS()} fallback={<button onClick={join}>Join Antihype JS</button>} > <p>Welcome</p> </Show>

<For each={subscribers()}> {(s, i) => ( <p> {i() + 1}: {s.name} </p> )} </For>

Bundle size

Performance

Экосистема

Заключение