大纲

Decorators 装饰器

  • @Component() 生命一个新的web组件
  • @Prop() 声明一个公开的属性
  • @State() 声明组件的内部状态
  • @Watch() 声明一个在属性或状态改变时运行的钩子
  • @Element() 声明对宿主元素的引用
  • @Method() 声明一个公开的公共方法
  • @Event() 声明组件可能发出的 DOM 事件
  • @Listen() 监听 DOM 事件

生命周期钩子

image.png

  • connectedCallback()
  • disconnectedCallback()
  • componentWillLoad()
  • componentDidLoad()
  • componentShouldUpdate(newValue, oldValue, propName): boolean
  • componentWillRender()
  • componentDidRender()
  • componentWillUpdate()
  • componentDidUpdate()
  • render()

应用加载事件

  1. window.addEventListener('appload', (event) => {
  2.   console.log(event.detail.namespace);
  3. });

其他(渲染方法)

  • Host: Host 是一个功能性组件，可以在渲染函数的根部使用，为宿主元素本身设置属性和事件监听器。
  • h(): 它用于render()将 JSX 转换为虚拟 DOM 元素。
  • readTask(): 安排一个 DOM 读取任务。提供的回调将在执行 DOM 读取的最佳时刻执行，而不会导致布局抖动。
  • writeTask(): 安排一个 DOM 写入任务。提供的回调将在执行 DOM 更改的最佳时刻执行，而不会导致布局抖动。
  • forceUpdate(): forceUpdate()不是同步的，可能会在下一帧中执行 DOM 渲染。
  • getAssetPath(): 获取Assets的路径
  • setMode()
  • getMode()
  • getElement()

装饰器

Component

示例

  1. import { Component } from '@stencil/core';
  3. @Component({
  4.   tag: 'todo-list',
  5.   styleUrl: 'todo-list.css'
  6. })
  7. export class TodoList {
  9. }

可选参数ß

@Component(opts: ComponentOptions)需要一个包含所有组件级功能的必需对象。

  1. export interface ComponentOptions {
  3.   /**
  4.   * 标记名：全局唯一，必须包含"-"
  5.   *
  6.   */
  7.   tag: string;
  9.   /**
  10.    * 样式作用域
  11.    */
  12.   scoped?: boolean;
  14.   /**
  15.    * 是否使用本机阴影dom封装
  16.    */
  17.   shadow?: boolean | { delegatesFocus: boolean };
  19.   /**
  20.    * 样式文件相对路径
  21.    */
  22.   styleUrl?: string;
  24.   /**
  25.    * 为不同模块指定不同的样式表
  26.    */
  27.   styleUrls?: string[] | d.ModeStyles;
  29.   /**
  30.    * 内联CSS，只支持css语法，不支持less和sass
  31.    */
  32.   styles?: string;
  34.   /**
  35.    * 资源文件夹相对路径
  36.    */
  37.   assetsDirs?: string[];
  39.   /**
  40.    * @deprecated Use `assetsDirs` instead
  41.    */
  42.   assetsDir?: string;
  43. }

嵌套组件

通过将 HTML 标记添加到 JSX 代码，可以轻松组合组件。
示例：

  1. import { Component, Prop, h } from '@stencil/core';
  3. @Component({
  4.   tag: 'my-embedded-component'
  5. })
  6. export class MyEmbeddedComponent {
  7.   @Prop() color: string = 'blue';
  9.   render() {
  10.     return (
  11.       <div>My favorite color is {this.color}</div>
  12.     );
  13.   }
  14. }

Prop

Props 将数据从父组件向下传递到子组件。组件需要使用@Prop()装饰器显式声明它们期望接收的 Props 。可以是number, string, boolean，甚至是Object或Array

示例

  1. // TodoList.tsx
  2. import { Prop } from '@stencil/core';
  3. import { MyHttpService } from '../some/local/directory/MyHttpService';
  4. ...
  5. export class TodoList {
  6.   @Prop() color: string;
  7.   @Prop() favoriteNumber: number;
  8.   @Prop() isSelected: boolean;
  9.   @Prop() myHttpService: MyHttpService;
  10. }

在TodoList类中，Props 是通过this操作符访问的。

  1. logColor() {
  2.   console.log(this.color)
  3. }

在外部，Props设置在元素上。

在 HTML 中，您必须使用破折号-来设置属性：

  1. <todo-list color="blue" favorite-number="24" is-selected="true"></todo-list>

在 JSX 中，你使用驼峰命名法设置一个属性：

  1. <todo-list color="blue" favoriteNumber={24} isSelected="true"></todo-list>

它们也可以通过 JS 从元素访问。

  1. const todoListElement = document.querySelector('todo-list');
  2. console.log(todoListElement.myHttpService); // MyHttpService
  3. console.log(todoListElement.color); // blue

可选参数

  1. export interface PropOptions {
  2.   attribute?: string;
  3.   mutable?: boolean;
  4.   reflect?: boolean;
  5. }

props 可变性

_默认情况下_Prop在组件逻辑内部是不可变的。一旦用户设置了一个值，组件就不能在内部更新它。但是，可以声明为mutable来显式允许从组件内部对 Prop 进行变异

  1. import { Prop } from '@stencil/core';
  3. ...
  4. export class NameElement {
  6.   @Prop({ mutable: true }) name: string = 'Stencil';
  8.   componentDidLoad() {
  9.     this.name = 'Stencil 0.7.0';
  10.   }
  11. }

Attribute 名称

可以使用装饰器的attribute选项更改此“默认”行为@Prop()。通过使用此选项，我们可以明确哪些属性具有关联的 DOM 属性及其名称。

  1. import { Component, Prop } from '@stencil/core';
  3. @Component({ tag: 'my-cmp' })
  4. class Component {
  5.   @Prop() value: string;
  6.   @Prop({ attribute: 'valid' }) isValid: boolean;
  7.   @Prop({ attribute: 'controller' }) controller: MyController;
  8. }

Reflect Properties Values to Attributes

当“prop”设置为“reflect”时，这意味着它们的值将在 DOM 中作为 HTML 属性呈现：

  1. @Prop({
  2.   reflect: true
  3. })
  1. @Component({ tag: 'my-cmp' })
  2. class Cmp {
  3.   @Prop({ reflect: true }) message = 'Hello';
  4.   @Prop({ reflect: false }) value = 'The meaning of life...';
  5.   @Prop({ reflect: true }) number = 42;
  6. }
  1. <my-cmp message="Hello" number="42"></my-cmp>

props默认值和验证

设置默认值

  1. import { Prop } from '@stencil/core';
  3. ...
  4. export class NameElement {
  5.   @Prop() name: string = 'Stencil';
  6. }

验证prop可以使用@Watch() 装饰器

  1. import { Prop, Watch } from '@stencil/core';
  3. ...
  4. export class TodoList {
  5.   @Prop() name: string = 'Stencil';
  7.   @Watch('name')
  8.   validateName(newValue: string, oldValue: string) {
  9.     const isBlank = typeof newValue !== 'string' || newValue === '';
  10.     const has2chars = typeof newValue === 'string' && newValue.length >= 2;
  11.     if (isBlank) { throw new Error('name: required') };
  12.     if (!has2chars) { throw new Error('name: has2chars') };
  13.   }
  14. }

State

State装饰器用来管理内部组件，不能从外部修改。对@State()属性的任何更改都会导致组件render函数再次被调用。

示例

用@State定义一个属性open, @Listen响应点击事件切换的值。

  1. import { Component, State, Listen, h } from '@stencil/core';
  3. @Component({
  4.   tag: 'my-toggle-button'
  5. })
  7. export class MyToggleButton {
  8.   @State() open: boolean;
  10.   @Listen('click', { capture: true })
  11.   handleClick() {
  12.     this.open = !this.open;
  13.   }
  15.   render() {
  16.     return <button>
  17.       {this.open ? "On" : "Off"}
  18.     </button>;
  19.   }
  20. }

维护一个Todo类型值列表。

  1. import { State } from '@stencil/core';
  3. type Todo = {
  4.   done: boolean,
  5.   description: string,
  6. }
  8. export class TodoList {
  10.   @State() completedTodos: Todo[];
  12.   completeTodo(todo: Todo) {
  13.     // This will cause our render function to be called again
  14.     this.completedTodos = [...this.completedTodos, todo];
  15.   }
  16. }

并非所有内部状态都可能需要用 装饰@State()，事实上，如果您确定该值不会更改或不需要触发重新渲染，则避免使用它是一个很好的做法

  1. class Component {
  3.   // If `cacheData` changes we don't want to rerender the component,
  4.   // so we DON'T decorate it with @State
  5.   cacheData = SOME_BIG_DATA;
  7.   // If this state change we want to run render() again
  8.   @State() value;
  9. }

Event

生命周期

  1. const el = document.createElement('my-cmp');
  2. document.body.appendChild(el);
  3. // connectedCallback() called
  4. // componentWillLoad() called (first time)
  6. el.remove();
  7. // disconnectedCallback()
  9. document.body.appendChild(el);
  10. // connectedCallback() called again, but `componentWillLoad()` is not.

**