渲染 stenciljs 无状态组件

Question

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

Answer 1

您可以在 Stencil 元素中编写功能组件。 As an example:

@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和获取children等

Stateless Stencil 组件无法导出为顶级 Web 组件 - 这些组件必须定义为类。

Answer 2

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

没有编译成网络组件，
不要创建 DOM 节点，
没有阴影 DOM 或范围样式，
没有生命周期钩子，

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

渲染 stenciljs 无状态组件

Rendering stenciljs stateless components

stenciljs