stenciljs - 渲染 stenciljs 无状态组件

Question

我已经使用 StencilJS 有一段时间了，并且来自 React 背景，我编写一些组件的直接本能就是将它们编写为无状态的。但是，模板文档根本没有提到无状态组件。这就是为什么我在这里写信是为了学习其他人的经验

Answer 1

您应该查看功能组件：https ://stenciljs.com/docs/functional-components创建无状态组件，它们：

• 没有编译成 Web 组件，
• 不要创建 DOM 节点，
• 没有 Shadow DOM 或作用域样式，
• 没有生命周期钩子，

根据文档，如果一个组件必须保持状态、处理事件等，它可能应该是一个类组件。如果一个组件的目的是简单地封装一些标记以便它可以在你的应用程序中重用，它可能是一个功能组件

Answer 2

您可以在 Stencil 元素中编写功能组件。例如：

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true
})
export class MyApp {
  render() {
    return (
      <div>
        <Loading />
       </div>
    );
  }
}

const Loading = () => {
  return (
    <div class="loading">
      <h1>Activating Santa</h1>
      <span></span>
    </div>
  );
};

在这种情况下<Loading>是一个类似于 React 模型的无状态功能组件 - 你可以获取它的 props 并获取子项等。

Stateless Stencil 组件不能作为顶级 Web 组件导出 - 这些组件必须定义为类。