StencilJS是一种新的编译器，用于使用纯自定义组件组合用户界面。Stencil使您能够使用新的尖端技术（如TypeScript和JSX）来构建组件，然后生成一个可以在任何受支持的地方使用的纯定制组件。这意味着您可以将模板生成的组件导入React，Angular，Vue，等背景模板基本上是一个编译器，不一定是一个UI库。将TSX（TypeScript+JSX）转换为自包含的自定义的编译器组件。之前当你开始学习这个工具时，需要注意的是Stencil并不是你需要学习的另一个沉重的JavaScript框架。如果您使用过Angular或React，或者了解web组件，大淘客网，那么Stencil是值得的看。模板使您能够编写一些TSX和scs，并将其编译为可交付的组件。它是由爱奥尼亚团队建造的，可以帮助他们编写更小的、可重复使用的组件，而不必携带角度的重量。然而，这导致了一个更普遍的问题的解决。我们可以用我们最喜欢的工具（TS、JSX等）编写独立于平台的组件，并编译成标准的自定义组件，然后这些组件可以与任何框架和支持浏览器一起使用。模板的所有特性都可以归结为优化和性能，这是背后的动机模板。模板还提供了许多现成的渐进特性，包括易于服务器端渲染和服务工人安装。现在，让我们来看看使用模具的实用方法及其一些有趣的特性。网络研讨会安装StencilevenStencil的安装很简单。您可以从GitHub克隆starter模板并安装npm依赖项。无需主要配置，只需克隆、安装和运行。克隆从GitHub到机器：复制到剪贴板#克隆启动程序git克隆https://github.com/ionic-team/stencil-starter.git托多安装dep相关性：复制到剪贴板#输入克隆的项目cd待办事项#安装依赖项npm安装您可以使用以下命令在3333端口启动应用程序命令：复制到剪贴板npm启动我们所有的组件代码都将用src/components编写。您可以忽略my name starter组件，因为我们将从项目。创建组件每个组件都保存在包含的文件夹中，例如TSX文件。包含文件夹还可以包含组件样式的SCSS文件。让我们从一个容器组件开始，它将作为应用程序的外壳。在components文件夹中创建一个名为site的文件夹，然后添加站点.tsx以及站点.scss文件夹中的文件。你刚刚创建了一个空的模具组件。贯穿为了简洁起见，我们将跳过SCSS的内容。您可以从提供的GitHub repo获取它们。考虑到这一点，返现app，让我们添加一些组件内容：复制到剪贴板//组件/站点/站点.tsx从'@stencil/core'导入{Component}；@组件({tag:'待处理站点'，样式URL:'站点.scss'})导出类站点{渲染（）{返回(

待办事项

{/*此处显示待办事项应用程序*/}

);}}从@stencil/core导入的组件装饰器将类定义为组件。Site类由组件decorator修饰，由decorator扩展以拥有组件特性。其中的一个特性就是有一个标记、一个样式和一个模板。标记和样式是使用对象定义的，并将对象作为参数传递给装饰器。render方法返回JSX，它作为组件的模板。此模板是在安装组件时呈现到浏览器中的模板。标签用于安装组件。在这种情况下，请在中替换my name tag索引.html和以下：复制到剪贴板然后使用npmstart运行应用程序。你应该得到以下：组成层次结构组件必须像其他使用组件的场景一样，模板组件可以彼此组合。这就是web组件的优点。一个组件可以有多个子代和孙子，以及兄弟姐妹。这使您能够编写小型的、自包含的组件，这些组件可以与其他较小的组件一起工作并执行单个任务。作为例如，让我们创建另一个名为TodoList的组件并使用Site组件进行组合。前者将是后者。收到到剪贴板//组件/待办事项列表/待办事项-列表.tsx从'@stencil/core'导入{Component}；@组件({tag:'待办事项列表'，styleUrl:'待办事项-列表.scss'})将类导出到列表{渲染（）{返回(

写一些代码

);}}与站点组件的语法相同，具有不同的名称和视觉效果。现在我们将组件添加到父站点元件：复制到剪贴板导出类站点{渲染（）{返回(

...

{/*子组件，TodoList*/}

);}}我们不必将组件子类导入父类。我们只需要包含todo list标记，然后Stencil在components文件夹中查找组件并加载它因此，声明到目前为止，我们只处理静态内容和标记。如果大多数组件不处理动态内容和标记，那么它们将是无用的。状态和道具装饰师被用来给模具带来生命组件.StatesA状态是在组件中定义的可变数据块。初始化后，人工智能网络，可以覆盖、删除和更新它以满足组件的需要。state基本上是用state修饰的类属性装饰工：抄送剪贴板从'@stencil/core'导入{Component，State}；@组件({tag:'待处理站点'，样式URL:'站点.scss'})导出类站点{//作为一个州的托多@State（）待办事项：待办事项[]=[{task:'Cook'，已完成：false}，{任务：'Dance'，已完成：true}，{task:'Eat'，已完成：false}];渲染（）{返回(

...