Stencil과 Respect 및 Angular는 어떻게 다릅니까?

Stencil과 Respect 및 Angular는 어떻게 다릅니까?

Angular에 익숙하고 React의 기본을 알고 있습니다.스텐실 문서를 조사하던 중 스텐실 구성요소가 둘 다 있다는 걸 알아냈어요@Component데코레이터와render()방법 -

컴포넌트.tsx

import { Component, Prop } from '@stencil/core';

@Component({
    tag: 'my-first-component',
    styleUrl: 'my-first-component.scss'
})
export class MyComponent {
    // Indicate that name should be a public property on the component
    @Prop() firstName: string;

    render() {
        return (
            <p>
            My name is {this.firstName}
            </p>
        );
    }
} 

스텐실이 각도나 반응과 어떻게 다른지, 그리고 어떻게 작동하는지 이해할 수 있게 도와주시겠어요?

Stencil은 프레임워크가 아니라 데코레이터가 있는 클래스를 표준 기반의 웹 컴포넌트로 변환하는 컴파일러일 뿐입니다.즉, Stencil 성분 모음을 생성하여 Angular, React, Vue 또는 Polymer에서 문제없이 사용할 수 있습니다.

기본적으로 Stencil은 기존 프레임워크에서 가장 뛰어난 기능을 조합하지만 100% 표준 준거 커스텀 요소를 출력합니다.그 때문에 @Component (Angular), render method (React)...

첫 번째 컴포넌트를 만들려면 첫 번째 컴포넌트에 대한 문서를 읽어보는 것이 좋습니다.여기에서는 모든 것을 설명하고 있습니다.

Stencil은 커스텀 웹 컴포넌트를 만드는 Ionic Developers에 의해 개발된 컴파일러입니다.

• Stencil은 웹 구성요소 이름 뒤에 표준 기술(HTML Templates, Custom Elements 및 Shadow DOM)을 사용합니다.
• Angular, React, Vue 및 Polymer의 가장 좋은 특징이 포함되어 있습니다.

Stencil 컴파일러는 의존관계 없이 바닐라 자바스크립트를 생성하며 다음과 같은 기능을 제공합니다.

1. 작은 가상 DOM 레이어
2. 효율적인 단방향 데이터 바인딩
3. 레이지 로드
4. 서버측 렌더링

그래서 Idea Behind Stencil은 기본적으로 Angular나 React와 같은 프레임워크 부분에 초점을 맞추는 것이 아니라 프레임워크와 독립적으로 사용할 수 있는 컴포넌트 컬렉션을 만드는 것입니다.

폴리머 서밋에서 이온 팀원들의 이야기를 보면 스텐실의 목적을 잘 알 수 있습니다.

기본적으로 Angular나 React와 같은 프레임워크가 아니라 웹 컴포넌트를 지원하는 모든 브라우저(또는 폴리필을 사용하는 거의 모든 브라우저)에서 실행되는 사양에 적합한 웹 컴포넌트를 만들 수 있도록 지원하는 컴파일러입니다.
이러한 컴포넌트를 사용하기 위한 프레임워크는 필요 없지만 모든 프레임워크와 함께 사용할 수 있습니다.이것은 웹 컴포넌트의 큰 장점입니다.
React에서 Angular 구성요소를 사용할 수 없지만 Angular, React 또는 Vue 또는 프레임워크가 전혀 없는 Stencil로 작성된 구성요소를 사용할 수 있습니다.

우선 stencil은 의존하지 않고 stencil Web 컴포넌트(tsx)를 vanilla javascript로 컴파일하는 컴파일러입니다.

궁금한 점은 angular, vue 등을 사용하지 않는가 하는 것입니다.

스텐실로 전체 앱을 만들 수 있어도 개별 컴포넌트를 프레임워크로부터 독립시켜 사용하는 것이 아이디어입니다.어떤 프레임워크에서도 사용할 수 있고 독립적으로 사용할 수도 있습니다.

프레임워크(각도, vue 등)를 상위 버전으로 전환하는 번거로움이 없습니다.

언급URL : https://stackoverflow.com/questions/45840024/how-stencil-is-different-from-react-and-angular