37

我熟悉 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 与 Angular 和反应有何不同以及它是如何工作的？

4

4 回答 4

42

Stencil 不是一个框架，它只是一个将带有装饰器的类转换为基于标准的 Web 组件的编译器。这意味着您可以生成模板组件集合并在 Angular、React、Vue 或 Polymer 中使用它们而不会出现任何问题。

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

为了制作您的第一个组件，我建议您阅读有关您的第一个组件的文档。你在那里解释了一切:)

于 2017-09-01T10:20:45.217 回答
23

Stencil 是由Ionic Developers 开发的编译器，它创建自定义 Web 组件。

  • Stencil 使用名称 Web 组件（ HTML 模板、自定义元素和 Shadow DOM ）背后的标准技术。
  • 包含Angular、React、Vue 和 Polymer的最佳特性。

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

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

所以 Stencil 背后的想法基本上不是像Angular或React那样专注于框架部分，而是创建可以独立于框架使用的组件集合。

于 2018-01-25T20:37:45.080 回答
11

观看 Polymer Summit 上 Ionic 团队成员的谈话，它很好地解释了 Stencil 的用途。

基本上，它不是Angular 或 React 之类的框架，它是一个编译器，可帮助您创建符合规范的 Web 组件，这些组件在支持 Web 组件的每个浏览器（或几乎所有使用polyfills的浏览器）中运行。
您不需要任何框架来使用这些组件，但您也可以将它们与任何框架一起使用，这是 Web 组件的巨大优势。
你不能在 React 中使用 Angular 组件，但你可以使用使用 Stencil 创建的组件，带有 Angular、React 或 Vue，或者根本没有框架。

于 2017-08-23T15:05:59.947 回答
3

首先，stencil 是一个编译器，它可以将 stencil Web 组件 (tsx) 编译为 vanilla javascript，而无需任何依赖。

奇怪的问题是我们不使用 angular 、 vue 等吗？

甚至可以用模板制作整个应用程序，其想法是使单个组件独立于框架。您可以在任何框架中使用它们，也可以独立使用。

这样您就不必为将框架（角度、vue 等）从一个版本切换到更高版本而感到痛苦。

于 2017-11-17T10:56:36.493 回答