text
NoorJs — це легка бібліотека JavaScript для створення швидких, ефективних і масштабованих застосунків. NoorJs побудовано навколо концепції First-Time-Rendering, що означає, що ваш компонент рендериться один раз на початку, і не буде перерендрено, якщо ви не виберете це явно. Ви маєте повний контроль над тим, коли і як рендерити ваші компоненти, що дозволяє оптимізувати продуктивність.
На відміну від інших фреймворків, NoorJs рендерить компоненти безпосередньо в DOM без використання віртуального DOM (VDOM). Ви можете без зусиль змінювати вигляд компонента, викликаючи просту функцію, не запускаючи перерендерацію.
NoorJs також пропонує потужний спосіб керувати станом. Ви можете слухати зміни конкретних станів і реагувати на них, що гарантує синхронізацію компонентів із вашими даними. Крім того, функції життєвого циклу дозволяють виконувати завдання, такі як отримання даних або оновлення стану на важливих етапах життєвого циклу компонента.
Обмін даними між компонентами значно спрощується за допомогою Channel API. Чи то передача даних у дочірні компоненти, батьківські компоненти або компоненти за межами прямої області — Channel API дозволяє здійснювати безшовний і ефективний потік даних.
Продовжуйте читати ці документи, щоб дізнатися, як NoorJs може змінити ваш підхід до створення сучасних веб-застосунків.
Основні характеристики:
- Легка бібліотека
- First-Time-Rendering
- Компоненти на основі елементів
- Прямий рендеринг у DOM
- Легка зміна вигляду
- Потужне керування станом
- Channel API
- Явний контроль рендеринга
- Надає сучасні функції фреймворків, як-от JSX
Цей простий лічильник продемонструє вам потужність NoorJs
import { createRoot, renderRoot, element, Component } from "@noorjs/core";
// компонент додатка
function App(this: Component) {
// ініціалізація компонента через виклик функції element і налаштування HTML тегу компонента
element("div", this);
// налаштування стану лічильника
const { getCounter, setCounter } = this.state(0);
// додавання прослуховувача події для збільшення стану лічильника при кліку на компонент
this.setEvent("onClick", () => {
// збільшення стану лічильника
setCounter((c) => c + 1);
// перерендеринг додатка при кліку на лічильник
this.render();
});
console.log("Це виконується один раз");
// повернення стрілочної функції, яка повертає JSX для рендеринга
return () =>
{getCount()}
; } // створення кореня const root = createRoot(); // рендеринг компонента renderRoot(root, []); ``` У цьому простому додатку для лічильника ми ініціалізували компонент App за допомогою функції element, створили стан лічильника з початковим значенням `0`, додали прослуховувач події `onClick` за допомогою функції `setEvent`, щоб збільшити стан лічильника і перерендерити компонент за допомогою методу `this.render` (Ось у чому сила **NoorJs**. Рендеріть його, коли це потрібно). Потім ми повернули JSX. **NoorJs** трактує кожен компонент як HTML-елемент, який ви вибираєте при ініціалізації компонента. Для більшості прикладів дивіться [**Документацію**](https://github.com/MESSELMIyahya/NoorJs/blob/main/docs/doc.md) 🚧 **NoorJs** ще розвивається, і в ньому є багато помилок та проблем, і йому потрібна ваша допомога та внески, щоб зробити його стабільним. Будь ласка, дивіться [Issues](https://github.com/MESSELMIyahya/NoorJs/issues) і починайте свій внесок у проект. **GITHUB** [https://github.com/MESSELMIyahya/NoorJs](https://github.com/MESSELMIyahya/NoorJs)
Перекладено з: [Noor JS The New JavaScript UI library](https://medium.com/@yahyaaoo200/noor-js-the-new-javascript-ui-library-349e4ccfe888)