Noor JS 새로운 JavaScript UI 라이브러리

NoorJs 빠르고 효율적이며 확장 가능한 애플리케이션을 구축하는 데 도움이 되도록 설계된 경량 UI JavaScript 프레임워크입니다. NoorJs는 처음 렌더링 개념을 기반으로 구축되었습니다. 즉, 구성 요소가 처음에 한 번 렌더링되고 명시적으로 선택하지 않는 한 다시 렌더링되지 않습니다. 구성 요소가 렌더링되는 시기와 방법을 완전히 제어하여 성능을 최적화할 수 있습니다.

다른 프레임워크와 달리 NoorJs는 VDOM(Virtual DOM)에 의존하지 않고 DOM에 직접 구성 요소를 렌더링합니다. 재렌더링을 실행하지 않고도 간단한 함수를 호출하여 구성 요소의 보기를 쉽게 수정할 수 있습니다.

NoorJs는 또한 상태를 관리하는 강력한 방법을 소개합니다. 특정 상태의 변경 사항을 수신하고 그에 따라 대응하여 구성 요소가 데이터와 동기화된 상태를 유지할 수 있습니다. 또한 수명 주기 기능을 사용하면 구성 요소 수명 주기의 주요 지점에서 데이터 가져오기 또는 상태 업데이트와 같은 작업을 수행할 수 있습니다.

채널 API를 사용하면 구성요소 간 데이터 공유가 매우 간단해졌습니다. 하위 구성요소, 상위 구성요소 또는 직접 범위 외부의 구성요소에 데이터를 전달하는 경우 채널 API를 사용하면 원활하고 효율적인 데이터 흐름이 가능합니다.

이 문서를 계속 읽으면서 NoorJ가 최신 웹 애플리케이션 구축에 대한 접근 방식을 어떻게 변화시킬 수 있는지 알아보세요.

주요 기능 :

• 경량 라이브러리
• 최초 렌더링
• 요소 기반 구성요소
• 직접 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 메소드(This Is The Power Of NoorJs. 필요할 때 렌더링하세요)를 사용하여 JSX를 반환했습니다.

NoorJs는 각 구성 요소를 구성 요소를 초기화할 때 선택하는 HTML 요소로 취급합니다. 더 많은 예를 보려면 설명서를 참조하세요

? NoorJs는 아직 개발 중이며 버그와 문제가 많아 안정적으로 만들기 위해서는 여러분의 도움과 기여가 필요합니다

이슈를 확인하고 참여해 보세요

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

위 내용은 Noor JS 새로운 JavaScript UI 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!