NoorJs 一個輕量級 UI JavaScript 框架，旨在幫助您建立快速、高效且可擴展的應(yīng)用程式。 NoorJs 是圍繞首次渲染的概念構(gòu)建的，這意味著您的元件在開始時渲染一次，並且除非您明確選擇，否則不會重新渲染。您可以完全控制元件的渲染時間和方式，從而優(yōu)化效能。

與其他框架不同，NoorJs 直接將元件渲染到 DOM，而不依賴虛擬 DOM (VDOM)。您可以透過呼叫簡單的函數(shù)輕鬆修改元件的視圖，而無需觸發(fā)重新渲染。

NoorJs 也引進了強大的狀態(tài)管理方法。您可以監(jiān)聽特定狀態(tài)的變化並做出相應(yīng)反應(yīng)，確保您的元件與資料保持同步。此外，生命週期函數(shù)可讓您在元件生命週期的關(guān)鍵點執(zhí)行資料擷取或狀態(tài)更新等任務(wù)。

使用 Channel API，元件之間的資料共享變得異常簡單。無論您是將資料傳遞給子元件、父元件還是直接作用域以外的元件，Channel API 都可以實現(xiàn)無縫且高效的資料流。

繼續(xù)閱讀這些文檔，探索 NoorJs 如何改變您建立現(xiàn)代 Web 應(yīng)用程式的方法。

主要特點：

• 輕量級函式庫
• 首次渲染
• 基於元素的組件
• 直接 DOM 渲染
• 輕鬆修改視圖
• 強大的狀態(tài)管理
• 頻道API
• 明確渲染控制
• 提供現(xiàn)代化框架功能，如 JSX

這個簡單的計數(shù)器應(yīng)用程式將向您展示 NoorJs 的強大功能

import { createRoot, renderRoot, element, Component } from "@noorjs/core";

// app component
function App(this: Component) {
  // initializing the component by call the element plug function and setting the component HTML tag
  element("div", this);
  // setting a counter state
  const { getCounter, setCounter } = this.state(0);

  // adding an event listener to increase the counter state whenever the component is clicked
  this.setEvent("onClick", () => {
    // increasing the counter state
    setCounter((c) => c + 1);
    // rerendering the app when the counter is clicked
    this.render();
  });

  console.log("This runs once");

  // returning an arrow function that returns the JSX to be rendered
  return () => <h2>{getCount()}</h2>;
}

// creating the root
const root = createRoot();

// render the component
renderRoot(root, [<App />]);

在這個簡單的計數(shù)器應(yīng)用程式中，我們使用元素插件函數(shù)初始化了我們的應(yīng)用程式元件，然後我們創(chuàng)建了以0 作為初始值的計數(shù)器狀態(tài)，然後我們使用setEvent 函數(shù)添加了一個onClick 事件監(jiān)聽器來增加計數(shù)器狀態(tài)並重新渲染元件使用this.render 方法（這是NoorJs 的力量。在需要時渲染它）然後我們回到JSX。

NoorJs 將每個元件視為您在初始化元件時選擇的 HTML 元素。有關(guān)更多範(fàn)例，請參閱文件

？ NoorJs 仍在開發(fā)中，它有許多錯誤和問題，需要您的幫助和貢獻才能使其穩(wěn)定

請查看問題並開始貢獻它

GITHUB
https://github.com/MESSELMIyahya/NoorJs

以上是Noor JS 新的 JavaScript UI 函式庫的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！