Stencil

一个轻量化，渐进式编译器，注意，不是框架。

使用 TypeScript 进行所有操作，这是一个门槛，有一定技术门槛要求。

PS：个人强烈推荐所有的前端同学都学习，或至少了解这个超集语言。

生命周期

componentWillLoad
componentDidLoad
componentWillUpdate
componentDidUpdate
componentDidUnload

几乎所有框架都有的，这里精简到 5 个，不再做过多赘述。

需要注意的是生命周期在父子组件的传递顺序，这个是常规理解顺序（a 套着 b，b 套着 c）：

cmp-a - componentWillLoad()
cmp-b - componentWillLoad()
cmp-c - componentWillLoad()
cmp-c - componentDidLoad()
cmp-b - componentDidLoad()
cmp-a - componentDidLoad()

装饰器

Component
Prop
Watch
State
Method
Element

Component

与 Angular 类似，用来装饰当前类为组件类，并且可以提前声明相关元数据。

@Component({

	tag: 'todo-list', // 标签名

	styleUrl: 'todo-list.scss', // 样式链接，可使用 styleUrls 来插入数组

	host: { // 当前组件配置

	    theme: 'todo', // class

	    role: 'list' // 参数

	}

})

使用：

<todo-list class='todo' role='list'></todo-list>

Prop

声明传入参数，可以通过元数据 @Prop({ mutable: true }) 与 @Prop({ reflectToAttr: true }) 使其可变动与反射到绑定源上。

@Prop() prop1: any

@Prop() prop1: number = 1 // 设置默认值

@Prop({ mutable: true }) prop2: any // 可变动

@Prop({ reflectToAttr: true }) prop3: any // 反射

使用注意：html 文件中使用要使用 a-b 连字符，组件中使用 aB 驼峰标识。

Watch

常规的观察装饰器，可以用来监听某个 Prop 的变化，用法：

@Watch('prop1')

watchHandler(newValue: any, oldValue: any) {

	// todo...

}

State

内部状态，跟 React 的 State 一个意思，不过更新不用使用 setState ，直接修改即可。

@State() state1: number = 1

Method

函数装饰器，用来说明这是个函数：

@Method()

method1() {

	// todo...

}

Element

比较稀奇的装饰器，可以用来获取当前组件的 DOM 实例，进行常规 DOM 操作，当前，内部声明的也已经绑定到实例上了，如下：

@Element() ele: HTMLElement

使用：

this.todoListEl.classList.add('active')

事件

两个相关装饰器：Event，EventEmitter，事件与事件发射器。

Event

发射：

import { Event, EventEmitter } from '@stencil/core';

export class TodoList {

  @Event() todoCompleted: EventEmitter;

  todoCompletedHandler(todo: Todo) {

    this.todoCompleted.emit(todo);

  }

}

监听：

import { Listen } from '@stencil/core';

export class TodoApp {

  @Listen('todoCompleted')

  todoCompletedHandler(event: CustomEvent) {

    console.log('Received the custom todoCompleted event: ', event.detail);

  }

}

监听原生

@Listen('body:scroll')

handleScroll(ev) {

  console.log('the body was scrolled', ev);

}

@Listen('keydown')

handleKeyDown(ev){

  if(ev.keyCode === 40){

    console.log('down arrow pressed')

  }

}

@Listen('keydown.up')

handleUpArrow(ev){

  console.log('will fire when up arrow is pressed');

}

目前支持的按键：

enter
escape
space
tab
left
up
right
down

不支持的考虑使用 keyCode 处理。

JSX 监听

这个牛逼了……还是上面那个 todoList，然后不用 @Listen，直接在组件上 on 即可：

<todo-list onTodoCompleted={ev => this.someMethod(ev)}></todo-list>

我下巴都掉了……N 久不用 React 了，这么先进？

数据响应

有点尴尬，也有点强势。

不支持监听数组（对象一样）本身变动，意思说：

改动数组本身，不会引起响应，比如 pop、push 啦，统战思想就是，换新数组。

let arr = [1, 2, 3]

arr.push(4) // 不响应

arr = [...arr, 4] // 响应

明白了？虽然觉得挺奇怪，但是好在简单，不用去记哪些能引起，哪些不能引起……

JSX

熟悉的同学可以跳过。

事件绑定两种方式

render() {

    return (

		<button onClick={ (event: UIEvent) => this.handleClick(event)}>Click Me!</button>

	);

}

render() {

    return (

		<button onClick={this.handleClick.bind(this)}>Click Me!</button>

	)

}

插入 html 代码

<div innerHTML={svgContent}></div>

ref

<input type="text" ref={(el: HTMLInputElement) => this.textInput = el} />

样式

Shadow DOM
样式变量

Shadow DOM

这玩意是一组 API，功能大体是用来封装 Web Component 到局部，类似 Vue 等的 scoped 功能。

Stencil 默认不使用 Shadow DOM，开启如下：

@Component({

  tag: 'shadow-component',

  styleUrl: 'shadow-component.scss',

  shadow: true

})

export class ShadowComponent {

}

就是 Component 装饰器一个 shadow 的元数据。

此时获取组件内的 DOM 实例则使用：this.el.shadowRoot.querySelector()。

之前使用的 css 文件声明：

my-element {

  div {

    background: blue;

  }

}

可以改为：

:host {

  div {

    background: blue;

  }

}

样式变量

在根路径下的 stencil.config.js 文件内配置：globalStyle: 'path/to/variables.css，内容类似下方：

:root {

  --app-primary-color: #488aff;

}

注意 :root 声明，然后其他组件使用如下：

h1 {

  color: var(--app-primary-color)

}

配置插件

css 预编译器需要声明插件才能使用，比如 sass、less、stylus 以及 postcss。

stencil.config.ts

import { less } from '@stencil/less'

exports.config = {

  plugins: [

    less()

  ]

}

全局引入