Чем трафарет отличается от React и Angular?

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

Посмотрите выступление членов команды Ionic на Polymer Summit, оно довольно хорошо объясняет назначение трафарета.

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

Answer 4

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

Любопытный вопрос: не используем ли мы angular, vue и т. Д.

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

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