Noor JS 新的 JavaScript UI 库

NoorJs 一个轻量级 UI JavaScript 框架，旨在帮助您构建快速、高效且可扩展的应用程序。 NoorJs 是围绕首次渲染的概念构建的，这意味着您的组件在开始时渲染一次，并且除非您明确选择，否则不会重新渲染。您可以完全控制组件的渲染时间和方式，从而优化性能。

与其他框架不同，NoorJs 直接将组件渲染到 DOM，而不依赖于虚拟 DOM (VDOM)。您可以通过调用简单的函数轻松修改组件的视图，而无需触发重新渲染。

NoorJs 还引入了一种强大的状态管理方法。您可以监听特定状态的变化并做出相应反应，确保您的组件与数据保持同步。此外，生命周期函数使您能够在组件生命周期的关键点执行数据获取或状态更新等任务。

使用 Channel API，组件之间的数据共享变得异常简单。无论您是将数据传递给子组件、父组件还是直接作用域之外的组件，Channel API 都可以实现无缝且高效的数据流。

继续阅读这些文档，探索 NoorJs 如何改变您构建现代 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中文网其他相关文章！