reactjs - vue - react vs angular 6

¿En qué se diferencia Stencil de React y Angular?

Question

Estoy familiarizado con Angular y sé lo básico de React. Estaba explorando documentos de stencil , encontré que el componente stencil tiene la función @Component decorator y render()

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

¿Me ayuda a entender que es diferente de angular y reacciona y cómo funciona?

Answer 1

En primer lugar, la plantilla es un compilador que compila el componente web de la plantilla (tsx) al javascript de vainilla sin ninguna dependencia.

La pregunta curiosa es si no usamos angular, vue, etc.

Incluso es posible hacer una aplicación completa con plantilla, la idea es hacer que el componente individual sea independiente del marco. Puede utilizarlos en cualquier marco o puede utilizar de forma independiente.

Para que no tenga que preocuparse por cambiar el marco (angular, vue, etc.) de una versión a una versión superior.

Answer 2

Stencil es un compilador desarrollado por Ionic Developers que crea componentes web personalizados.

• Stencil utiliza las tecnologías estándar detrás de los componentes web de nombre ( plantillas HTML, elementos personalizados y DOM de sombra ).
• Contiene las mejores características de Angular, React, Vue y Polymer .

El compilador Stencil produce JavaScript de vainilla, sin ninguna dependencia y aún proporciona las siguientes funciones.

1. Una pequeña capa virtual de DOM
2. Enlace de datos unidireccional eficiente
3. Carga lenta
4. Representación del lado del servidor

Por lo tanto, Idea Behind Stencil básicamente no se centra en la parte del marco como Angular o React, sino en crear colecciones de componentes que se pueden usar independientemente de un marco.

Answer 3

Stencil no es un marco, es solo un compilador que convierte las clases con decoradores en componentes web basados ​​en estándares. Esto significa que puede generar una colección de componentes de plantilla y usarlos en Angular, React, Vue o Polymer sin ningún problema.

Básicamente, Stencil combina algunas de las mejores características de los marcos tradicionales, pero genera elementos personalizados que cumplen con los estándares al 100%, por eso tiene @Component (Angular), método de renderización (React) ...

Para hacer su primer componente, sugiero leer los docs sobre su primer componente. Tienes todo explicado allí :)

Answer 4

Vea la talk de los miembros del equipo de Ionic en Polymer Summit, que explica el propósito de Stencil bastante bien.

Básicamente, no es un marco como Angular o React, es un compilador que le ayuda a crear componentes web de conformidad con las especificaciones que se ejecutan en todos los navegadores que admiten componentes web (o en casi cualquier navegador que utilice polyfills ).
No necesita ningún marco para usar estos componentes, pero puede usarlos también con cualquier marco, que es la gran ventaja de los componentes web.
No puedes usar un componente Angular en React, pero puedes usar un componente creado con Stencil con Angular o React o Vue o sin marco en absoluto.