背景

原生的 Web Component 处理封装组件并不流畅，我们需要大量的特殊处理对于数据的监听、DOM的渲染等等，所以针对这些不符合现在开发模式的情况，帮助我们提高开发效率的 “轮子” Stencil 应运而生。

是什么？

Stencil 使用 TypeScript、JSX 和 CSS 创建基于标准的 Web 组件，可用于制作高质量的组件库、设计系统和应用程序。
Stencil 生成符合标准的 Web 组件，可以直接与流行的框架一起使用。

与直接使用自定义元素相比，Stencil 提供了额外的 API，使编写快速组件更简单。Virtual DOM、JSX 和异步渲染等 API 使快速、强大的组件易于创建，同时仍保持与 Web 组件的 100% 兼容性。Stencil 还在 Web 组件之上启用了许多关键功能，特别是预渲染和对象即属性（而不仅仅是字符串）。

Stencil 可以理解为一个用于快速构建 Web Components 的工具集。也可以理解为一个编译器，这意味着，当你的组件一旦经过 build 完成后，就会脱离 Stencil，不再依赖。并且 Stencil 相对原生 Web Components 提供了完善的项目目录架构和配置，并提供了诸多的语法糖和封装函数。

优势

  • Virtual DOM
  • Async rendering (inspired by React Fiber) fiber 的性能优势 像Fiber一样的调度模式
  • Reactive data-binding 单向数据流
  • TypeScript
  • 组件懒加载
  • JSX支持
  • 无依赖性组件
  • 虚拟DOM
  • 静态网站生成(SSG)

Stencli 解决的痛点

  1. 完整的文档
  2. 开箱急用
  3. 原生 Web Components 操作 DOM 并不是很流畅，类似于原生的写法并不高效，而 Stencil 为了解决这一个问题加入了JSX 语法，使操作DOM有了React的体验。
  4. Stencil 提供的”@”语法糖装饰器可以提供 单选数据流、数据变动 hook 等，结合 JSX，带给我们了丝滑的开发体验。
  5. Virtual DOM提供了一种到真实dom的映射，从虚拟dom之间的diff，并将diff info patch到real dom，类似于 React 和 Vue，这样的虚拟DOM映射，会使追踪数据变动，重新渲染的流程更加高效。
  6. Stencil 还提供了更加完善的生命周期。
  7. 内置完善的 单元测试 和 e2e测试框架，在我们生成组件时，使用组件生成指令时，提供配套的 unit 和 e2e 模板文件。
  8. 提供 custom elements polyfill 给予低版本框架更多支持。
  9. 还有一些其他的特性，比如 Async rendering 类似于 fiber、组件懒加载等等，也是我们日常开发中比较实用的技能。