Stencil 了解

Stencil: A Compiler for Web Components and High Performance Web Apps
Stencil 文档
github: https://github.com/ionic-team/stencil

2020.12.14 星期一

一个轻量化，渐进式编译器，注意，不是框架。
使用 TypeScript 进行所有操作，这是一个门槛，有一定技术门槛要求。

官方描述特征是：
. Virtual DOM
. Async rendering (inspired by React Fiber)
. Reactive data-binding
. TypeScript
. JSX

而 Stencil.js 已经在今年（2019 ）的 6 月份，推出了 1.0 正式版

SMTC

@Component({
 tag: 'my-component',
 styleUrl: 'my-component.css',
 shadow: true
})
export class MyComponent {
 @Prop() first: string;

 private getText(): string {
 return this.first;
 }

 render() {
 return <div>Hello, World! I'm {this.getText()}</div>;
 }
}

由于使用 Stencil 开发的组件只是 Web Components，所以这些组件可以运行在所有的主流框架（AVR）中，也可以独立地运行。这一特质使它可以成为新的前端容器框架——毕竟 Web Components 是一个新的前端容器。

场景

用途一：开发前端应用
用途二：连接混合应用
用途三：连接其它前端框架
用途四：构建跨框架的 UI 库 / 设计系统
用途五：微前端应用

结论：胶水框架
Web Components 大法虽好，但是你还是需要一个快速开发 Web Components 的框架/工具。

5 条评论

基础

生命周期
componentWillLoad
componentDidLoad
componentWillUpdate
componentDidUpdate
componentDidUnload

装饰器
Component
Prop
Watch
State
Method
Element