NoorJs ein leichtes UI-JavaScript-Framework, das Ihnen beim Erstellen schneller, effizienter und skalierbarer Anwendungen hilft. NoorJs basiert auf dem Konzept des First-Time-Rendering, was bedeutet, dass Ihre Komponente zu Beginn einmal gerendert wird und nicht erneut gerendert wird, es sei denn, Sie entscheiden sich ausdrücklich dafür. Sie haben die volle Kontrolle darüber, wann und wie Ihre Komponenten gerendert werden, was eine optimierte Leistung erm?glicht.

Im Gegensatz zu anderen Frameworks rendert NoorJs Komponenten direkt im DOM, ohne auf ein virtuelles DOM (VDOM) angewiesen zu sein. Sie k?nnen die Ansicht Ihrer Komponente mühelos ?ndern, indem Sie eine einfache Funktion aufrufen, ohne ein erneutes Rendern auszul?sen.

NoorJs führt au?erdem eine leistungsstarke M?glichkeit zur Statusverwaltung ein. Sie k?nnen auf ?nderungen bestimmter Zust?nde achten und entsprechend reagieren, um sicherzustellen, dass Ihre Komponenten mit Ihren Daten synchron bleiben. Darüber hinaus erm?glichen Ihnen Lebenszyklusfunktionen die Durchführung von Aufgaben wie Datenabruf oder Statusaktualisierungen an wichtigen Punkten im Lebenszyklus Ihrer Komponente.

Der Datenaustausch zwischen Komponenten wird mit der Channel-API unglaublich einfach. Unabh?ngig davon, ob Sie Daten an untergeordnete Komponenten, übergeordnete Komponenten oder Komponenten au?erhalb des direkten Bereichs übergeben, erm?glicht die Channel-API einen nahtlosen und effizienten Datenfluss.

Lesen Sie diese Dokumente weiter, um herauszufinden, wie NoorJs Ihren Ansatz zum Erstellen moderner Webanwendungen ver?ndern kann.

Hauptmerkmale:

• Leichte Bibliothek
• Erstmaliges Rendern
• Elementbasierte Komponenten
• Direktes DOM-Rendering
• Mühelose Ansichts?nderung
• Leistungsstarkes Staatsmanagement
• Kanal-API
• Explizite Rendering-Steuerung
• Bietet moderne Framework-Funktionen wie JSX

Diese einfache Z?hler-App zeigt Ihnen die Leistungsf?higkeit von 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 />]);

In dieser einfachen Z?hler-App haben wir unsere App-Komponente mithilfe der Element-Plug-Funktion initialisiert, dann den Z?hlerstatus mit 0 als Anfangswert erstellt und dann einen onClick-Ereignis-Listener mit der setEvent-Funktion hinzugefügt, um den Z?hlerstatus zu erh?hen und die Komponente neu zu rendern mit dieser.render-Methode (This Is The Power Of NoorJs. Render It When You Need It) haben wir dann JSX zurückgegeben.

NoorJs behandelt jede Komponente als HTML-Element, das Sie bei der Initialisierung Ihrer Komponente ausw?hlen. Weitere Beispiele finden Sie in der Dokumentation

? NoorJs befindet sich noch in der Entwicklung und weist viele Fehler und Probleme auf und ben?tigt Ihre Hilfe und Beitr?ge, um es stabil zu machen

Bitte sehen Sie sich die Probleme an und beginnen Sie, indem Sie dazu beitragen

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

Das obige ist der detaillierte Inhalt vonNoor JS Die neue JavaScript-UI-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!