Stencil笔记(1) - 组件

Stencil: 一个Web Components编译器

Stencil具有诸如以下特征

• Virtual DOM
• 异步渲染（受React Fiber启发）
• 响应式数据绑定
• Typescript
• JSX

通过添加带有.tsx扩展名的新文件（例如my-first-component.tsx），并放置在src / components目录中来创建Stencil组件。.tsx扩展名是必需的，因为Stencil组件是使用jsx和typescript构建的。

以下是官网的一个组件的例子：

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() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

一旦编译完成，这个组件就像其他标签一样可以在html中使用。

<my-first-component name="Max"></my-first-component>

注意：Web组件必须在标签中包含"-"。像firstComponent这样是无效的标签名称。当渲染后，浏览器将显示：My name is MAx

首先，@component装饰器。这个装饰器向Stencil编译器提供关于组件的元数据。如要使用的标签和外部样式，可以在此处设置并由编译器获取。

要向组件添加渲染的内容，必须声明一个返回jsx的render函数。其思想是返回html的表示。

然后是@prop（），其装饰的属性会自动监听更改。
如果我们更改了元素的name属性，组件将触发其渲染功能，更新显示的内容。