Noor JS Die neue JavaScript-UI-Bibliothek

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!