Noor JS 新しい JavaScript UI ライブラリ

NoorJs 高速、効率的、スケーラブルなアプリケーションの構築を支援するように設計された軽量 UI JavaScript フレームワーク。 NoorJs は、初回レンダリングの概念に基づいて構築されています。つまり、コンポーネントは最初に 1 回レンダリングされ、明示的に選択しない限り再レンダリングされません。コンポーネントをいつどのようにレンダリングするかを完全に制御できるため、パフォーマンスを最適化できます。

他のフレームワークとは異なり、NoorJs は仮想 DOM (VDOM) に依存せずにコンポーネントを DOM に直接レンダリングします。再レンダリングをトリガーせずに、単純な関数を呼び出すだけで、コンポーネントのビューを簡単に変更できます。

NoorJs は、状態を管理する強力な方法も導入しています。特定の状態への変化をリッスンし、それに応じて反応することで、コンポーネントがデータと確実に同期されるようにすることができます。さらに、ライフサイクル関数を使用すると、コンポーネントのライフサイクルの重要なポイントでデータのフェッチや状態の更新などのタスクを実行できます。

Channel API を使用すると、コンポーネント間でのデータの共有が驚くほど簡単になります。子コンポーネント、親コンポーネント、または直接スコープ外のコンポーネントにデータを渡す場合でも、チャネル API を使用すると、シームレスで効率的なデータ フローが可能になります。

これらのドキュメントを読み続けて、NoorJ が最新の 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 id="getCount">{getCount()}</h2>;
}

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

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

このシンプルなカウンター アプリでは、要素プラグ関数を使用してアプリ コンポーネントを初期化し、初期値として 0 を使用してカウンター状態を作成し、setEvent 関数を使用して onClick イベント リスナーを追加してカウンター状態を増やし、コンポーネントを再レンダリングしました。 this.render メソッド (これは NoorJs の力です。必要なときにレンダリングしてください) を使用すると、JSX.

が返されました。

NoorJs は、各コンポーネントを、コンポーネントの初期化時に選択した HTML 要素として扱います。その他の例については、ドキュメント

を参照してください。

? NoorJs はまだ開発中であり、多くのバグや問題があり、安定させるためにあなたの助けと貢献が必要です

問題を参照し、投稿して始めてください

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

以上がNoor JS 新しい JavaScript UI ライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。