Noor JS 新的 JavaScript UI 函式庫

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

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

NoorJs 也引進了強大的狀態管理方法。您可以監聽特定狀態的變化並做出相應反應，確保您的元件與資料保持同步。此外，生命週期函數可讓您在元件生命週期的關鍵點執行資料擷取或狀態更新等任務。

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

繼續閱讀這些文檔，探索 NoorJs 如何改變您建立現代 Web 應用程式的方法。

主要特點：

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

這個簡單的計數器應用程式將向您展示 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 />]);

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

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

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

請查看問題並開始貢獻它

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

以上是Noor JS 新的 JavaScript UI 函式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！