0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, react, webpack, vdom, view-библиотеки, preact, api react, компоненты с npm, inferno, snabbdom, virtual dom</p>
1
<p>Теги: javascript, react, webpack, vdom, view-библиотеки, preact, api react, компоненты с npm, inferno, snabbdom, virtual dom</p>
2
<p>React-разработчики очень привязаны к своей библиотеке. Но ведь React обещал свободу от фреймворков, свободу выбора библиотек для запросов и управления состоянием. Возможно, вашему приложению не так уж нужен именно React? Вот три интересных<strong>view</strong>-библиотеки, построенных на<strong>vDOM</strong>.</p>
2
<p>React-разработчики очень привязаны к своей библиотеке. Но ведь React обещал свободу от фреймворков, свободу выбора библиотек для запросов и управления состоянием. Возможно, вашему приложению не так уж нужен именно React? Вот три интересных<strong>view</strong>-библиотеки, построенных на<strong>vDOM</strong>.</p>
3
<h3>Preact</h3>
3
<h3>Preact</h3>
4
<p><a>Preact</a>- библиотека с API React, которая весит всего 3 килобайта (сам React - 40). Компоненты с<strong>npm</strong>, сделанные для React, подключаются через<strong>webpack</strong>-трюк и работают нормально. В<strong>Preact</strong>нет самых горячих новинок: фрагментов, порталов, асинхронного рендеринга. Если вы пишете UI для встроенных систем и размер критичен - попробуйте<strong>Preact</strong>.</p>
4
<p><a>Preact</a>- библиотека с API React, которая весит всего 3 килобайта (сам React - 40). Компоненты с<strong>npm</strong>, сделанные для React, подключаются через<strong>webpack</strong>-трюк и работают нормально. В<strong>Preact</strong>нет самых горячих новинок: фрагментов, порталов, асинхронного рендеринга. Если вы пишете UI для встроенных систем и размер критичен - попробуйте<strong>Preact</strong>.</p>
5
<h3>Inferno</h3>
5
<h3>Inferno</h3>
6
<p><a>Inferno</a>- чертовски быстрый аналог React. Если в вашем приложении есть частые огромные обновления страницы (например, визуализация), попробуйте ускорить его, переписав компоненты на<strong>Inferno</strong>.</p>
6
<p><a>Inferno</a>- чертовски быстрый аналог React. Если в вашем приложении есть частые огромные обновления страницы (например, визуализация), попробуйте ускорить его, переписав компоненты на<strong>Inferno</strong>.</p>
7
<h3>Snabbdom</h3>
7
<h3>Snabbdom</h3>
8
<p><a>Snabbdom</a>- отдельная реализация<strong>virtual DOM</strong>. Никаких компонент или управления состоянием: только быстрые обновления<strong>DOM</strong>. Если у вас есть идея для своего фронтенд-фреймворка, не обязательно писать эту часть самому.</p>
8
<p><a>Snabbdom</a>- отдельная реализация<strong>virtual DOM</strong>. Никаких компонент или управления состоянием: только быстрые обновления<strong>DOM</strong>. Если у вас есть идея для своего фронтенд-фреймворка, не обязательно писать эту часть самому.</p>
9
var container = document.getElementById('container'); var vnode = h('div#container.two.classes', {on: {click: someFn}}, [ h('span', {style: {fontWeight: 'bold'}}, 'This is bold'), ' and this is just normal text', h('a', {props: {href: '/foo'}}, 'I\'ll take you places!') ]); // Patch into empty DOM element - this modifies the DOM as a side effect patch(container, vnode);<h2>Итог</h2>
9
var container = document.getElementById('container'); var vnode = h('div#container.two.classes', {on: {click: someFn}}, [ h('span', {style: {fontWeight: 'bold'}}, 'This is bold'), ' and this is just normal text', h('a', {props: {href: '/foo'}}, 'I\'ll take you places!') ]); // Patch into empty DOM element - this modifies the DOM as a side effect patch(container, vnode);<h2>Итог</h2>
10
<p>Теперь вы знаете три отличных альтернативы React. В следующем проекте подумайте: важны ли вам маленький размер и быстрые обновления? Если да, возможно, пора попробовать что-то новое.</p>
10
<p>Теперь вы знаете три отличных альтернативы React. В следующем проекте подумайте: важны ли вам маленький размер и быстрые обновления? Если да, возможно, пора попробовать что-то новое.</p>
11
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
11
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
12
12