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

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

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

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

これらのドキュメントを読み続けて、NoorJ が最新の Web アプリケーションを構(gòu)築するアプローチをどのように変革できるかを探ってください。

主な機能:

• 軽量ライブラリ
• 初回レンダリング
• 要素ベースのコンポーネント
• ダイレクト 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 />]);

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

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

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

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

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

以上がNoor JS 新しい JavaScript UI ライブラリの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。