Stencil与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不是一个框架,它只是一个将带有装饰器的类转换为基于标准的Web组件的编译器.这意味着您可以生成模板组件的集合,并在Angular,React,Vue或Polymer中使用它们而没有任何问题.

基本上,Stencil结合了传统框架的一些最佳功能,但输出100%符合标准的自定义元素,这就是为什么你有@Component(Angular),渲染方法(React)......

为了制作您的第一个组件,我建议您阅读有关您的第一个组件的文档.你有解释的一切:)

Answer 2

Stencil是由Ionic Developers开发的编译器,它可以创建自定义Web组件.

• Stencil使用名称Web组件(HTML模板,自定义元素和Shadow DOM)背后的标准技术.
• 包含Angular,React,Vue和Polymer的最佳功能.

Stencil编译器生成vanilla JavaScript,没有任何依赖关系,仍然提供以下功能.

1. 一个很小的虚拟DOM层
2. 高效的单向数据绑定
3. 延迟加载
4. 服务器端呈现

因此,Stencil背后的理念基本上不是关注像Angular或React这样的框架部分,而是创建可以独立于框架使用的组件集合.

Answer 3

观看聚合物峰会上Ionic团队成员的谈话,它解释了Stencil的目的非常好.

基本上它不是像Angular或React这样的框架,它是一个编译器,可以帮助您创建符合规范的Web组件,这些组件在支持Web组件的每个浏览器(或几乎所有使用polyfill的浏览器)中运行.
您不需要任何框架来使用这些组件,但您也可以将它们与任何框架一起使用,这是Web组件的巨大优势.
您不能在React中使用Angular组件,但您可以使用使用Stencil创建的组件与Angular或React或Vue或根本没有框架.