Как Трафал отличается от Реагента и Углового?

Я знаком с Angular и знаю основы React. Я изучал трафаретные документы, я обнаружил, что компонент трафарета имеет и @Component decorator и render() function-

component.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>
        );
    }
}

Помогите мне понять, как он отличается от углового и реагирует и как он работает?

Ответы

Ответ 1

Stencil - это не фреймворк, а просто компилятор, который превращает классы с декораторами в веб-компоненты на основе стандартов. Это означает, что вы можете создать коллекцию компонентов трафарета и использовать их в Угловом, Реактном, Vue или Полимере без каких-либо проблем.

В основном, Stencil сочетает в себе некоторые из лучших функций традиционных фреймворков, но выводит 100% стандартных пользовательских элементов, поэтому у вас есть @Component (Angular), метод render (React)...

Чтобы сделать свой первый компонент, я предлагаю прочитать документы о вашем первом компоненте. У вас там все объяснено :)

Ответ 2

Stencil - это компилятор, разработанный Ionic Developers, который создает пользовательские веб-компоненты.

  • Stencil использует стандартные технологии за названия веб-компонентов (HTML-шаблоны, пользовательские элементы и теневой DOM).
  • Содержит лучшие характеристики углового, реактивного, Vue и полимера.

Компилятор Stencil производит ванильный JavaScript без каких-либо зависимостей и по-прежнему предоставляет следующие функции.

  1. Крошечный виртуальный слой DOM
  2. Эффективное одностороннее связывание данных
  3. Ленивая загрузка
  4. Отправка на стороне сервера

Таким образом, Idea Behind Stencil в основном не фокусируется на части структуры, такой как Angular или React, но и на создании коллекций компонентов, которые могут использоваться независимо от структуры.

Ответ 3

Наблюдайте за разговорами о членах Ionic на Polymer Summit, это объясняет, что цель Stencil довольно хороша.

В основном это не рамочная система, как Angular или React, это компилятор, который помогает вам создавать веб-компоненты, совместимые со спецификациями, которые запускаются в каждом браузере, который поддерживает веб-компоненты (или почти любой браузер, использующий полисы).
Вам не нужны никакие рамки для использования этих компонентов, но вы можете использовать их также с любой инфраструктурой, что является огромным преимуществом веб-компонентов.
Вы не можете использовать компонент Angular в React, но вы можете использовать компонент, созданный с помощью Stencil с Angular или React или Vue или без рамки вообще.

Ответ 4

Прежде всего, трафарет - это компилятор, который компилирует веб-компонент трафарета (tsx) на ванильный javascript без какой-либо зависимости.

Любопытный вопрос заключается в том, что мы не используем угловые, vue и т.д.

Даже можно создать цельное приложение с трафаретом, идея состоит в том, чтобы сделать отдельный компонент независимым от фреймворка. Вы можете использовать их в любых рамках или использовать самостоятельно.

Так что вам не нужно болеть за переключение рамки (угловой, vue и т.д.) С версии на более высокую версию.