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

與其他框架不同，NoorJs 直接將組件渲染到 DOM，而不依賴于虛擬 DOM (VDOM)。您可以通過調用簡單的函數輕松修改組件的視圖，而無需觸發(fā)重新渲染。

NoorJs 還引入了一種強大的狀態(tài)管理方法。您可以監(jiān)聽特定狀態(tài)的變化并做出相應反應，確保您的組件與數據保持同步。此外，生命周期函數使您能夠在組件生命周期的關鍵點執(zhí)行數據獲取或狀態(tài)更新等任務。

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

繼續(xù)閱讀這些文檔，探索 NoorJs 如何改變您構建現代 Web 應用程序的方法。

主要特點：

• 輕量級庫
• 首次渲染
• 基于元素的組件
• 直接 DOM 渲染
• 輕松修改視圖
• 強大的狀態(tài)管理
• 頻道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 />]);

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

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

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

請查看問題并開始做出貢獻

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

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